jquery实用技巧之输入框提示语句


Posted in Javascript onJuly 28, 2016

我们在编写网页的时候不可避免的会遇到输入框,那么怎么设计输入框才能更加优雅呢?不同的人会有不同的答案,下面分享一个比较不错的设计。

效果图

jquery实用技巧之输入框提示语句

细节

这个效果主要是通过JQuery来实现,我的思路如下:

输入框获取鼠标焦点之前,显示原标签的value属性值;获取了鼠标焦点之后,如果当前value有值,那就清空,否则恢复;密码框特殊照顾,待会讲。 

实现的代码如下:

$("#address").focus(function(){
    var address_text = $(this).val();
    if(address_text=="请输入邮箱地址"){
      $(this).val("");
    }
  });
$("#address").blur(function(){
    var address_value = $(this).val();
    if(address_value==""){
      $(this).val("请输入邮箱地址")
    }
  });

完整的小例子

完整的代码如下,尤其注意<input type="text" id="password">的实现!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>文本输入框中内容的提示效果</title>
  <script type="text/javascript" src="jquery-2.2.4.min.js"></script>
</head>
<body>
<script>
$(function(){
  $("#address").focus(function(){
    var address_text = $(this).val();
    if(address_text=="请输入邮箱地址"){
      $(this).val("");
    }
  });
  $("#password").focus(function(){
    var password_text = $(this).val();
    if(password_text=="请输入密码"){
      $(this).attr("type","password");
      $(this).val("");
    }
  });
  $("#address").blur(function(){
    var address_value = $(this).val();
    if(address_value==""){
      $(this).val("请输入邮箱地址")
    }
  });
  $("#password").blur(function(){
    var password_value = $(this).val();
    if(password_value==""){
      $(this).attr("type","text");
      $(this).val("请输入密码")
    }
  });
});
</script>
<div align="center">
  <input type="text" id ="address" value="请输入邮箱地址"><br><br>
  <input type="text" id ="password" value="请输入密码"><br><br>
  <input type="button" name="登录" value="登陆">
</div>
</body>
</html>

$(function(){});其就是$(document).ready(function(){});的缩写。这个倒不是什么重点。

$(this).attr(“type”,”password”);将当前对象(也就是获取鼠标焦点的输入框)的属性值进行动态的改变。达到输入数据的时候以密码框的形式出现。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
Javasript设计模式之链式调用详解
Apr 26 Javascript
Vue+Django项目部署详解
May 30 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 Javascript
基于javascript实现移动端轮播图效果
Dec 21 Javascript
jQuery stop()用法实例详解
Jul 28 #Javascript
AngularJS中的表单简单入门
Jul 28 #Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 #Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 #Javascript
AngularJS 模块详解及简单实例
Jul 28 #Javascript
jQuery制作网页版选项卡
Jul 28 #Javascript
AngularJS 中的事件详解
Jul 28 #Javascript
You might like
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
奇怪的PHP引用效率问题分析
2012/03/23 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
基于JavaScript实现文字超出部分隐藏
2016/02/29 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
canvas绘制七巧板
2017/02/03 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
微信小程序 下拉菜单的实现
2017/04/06 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
Vuex的实战使用详解
2019/10/31 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
Python常见内置高效率函数用法示例
2018/07/31 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
2016/12/06 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
Kneipp克奈圃美国官网:德国百年精油配方的传承
2018/02/07 全球购物
运动会方阵解说词
2014/02/12 职场文书
英文求职信写作小建议
2014/02/16 职场文书
六五普法宣传标语
2014/10/06 职场文书
机关作风建设自查报告
2014/10/22 职场文书
公司经营目标责任书
2015/01/29 职场文书
出生证明格式
2015/06/15 职场文书
python实现简单的名片管理系统
2021/04/26 Python
python基础之错误和异常处理
2021/10/24 Python
《废话连篇——致新手》——chinapizza
2022/04/05 无线电