jQuery文本框默认值自动清除和填充的实现
2015-10-06 23:30
671 查看
<ol><li><span style="font-family: Arial, Helvetica, sans-serif;"><script type="text/javascript"></span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">$(document).ready(function(){</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;">var i = 0;</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">$("input").on("focus blur",function(){</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">//this 表示当前操作对象。是dom对象,可以通过this.value获得值</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">//$(this).val(i++);</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">// * 判断当前对象是否被选中 , is() 用于判断</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">if($(this).is(":focus")){</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">//获得焦点 --只有内容为默认值时才清空</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">if( $(this).val() == $(this).attr("defaultValue") ){</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">$(this).val("");</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">}</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">} else {</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">//失去焦点 , attr() 通过属性名获得值 -- 如果没有内容,使用默认值</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">if ($(this).val() == "") {</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">$(this).val($(this).attr("defaultValue"));</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">}</span></li><li><span style="font-family: Arial, Helvetica, sans-serif;"> </span><span style="font-family: Arial, Helvetica, sans-serif;">}</span></li><li><span style="font-family: Arial, Helvetica, sans-serif; font-weight: bold;">});</span></li><li> </li><li><input type="text" value="请输入账号" defaultValue="请输入账号" /></li><li><input type="text" value="请输入密码" defaultValue="请输入密码"/> </li></ol>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- Jquery实现的table最后一行添加样式的代码
- jQuery实现向下滑出的平滑下拉菜单效果
- jQuery 练习[一] 学习jquery的准备工作
- jquery获得页面元素的坐标值实现思路及代码
- 使用Browserify配合jQuery进行编程的超级指南
- jquery如何实现在加载完iframe的内容后再进行操作
- jquery $.ajax()取xml数据的小问题解决方法
- jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
- Jquery 表单取值赋值的一些基本操作
- jQuery实现复选框批量选择与反选的方法
- jQuery中的常用事件总结