码迷,mamicode.com
首页 > Web开发 > 详细

jQuery实现点击文本框清除内容代码实例

时间:2016-02-02 19:49:03      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

jQuery实现点击文本框清除内容代码实例:
本章节介绍一下文本框最简单的一个人性化措施,就是点击文本框的时候能够删除里面的提示文本。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
  $("#email").focus(function(){ 
    var email_txt=$(this).val(); 
    if(email_txt==this.defaultValue){ 
      $(this).val(""); 
    } 
  }) 
  $("#email").blur(function(){ 
    var email_txt=$(this).val(); 
    if(email_txt==""){ 
      $(this).val(this.defaultValue); 
    } 
  }) 
})
</script> 
</head> 
<body> 
<input type="text" value="请输入邮箱地址" id="email"/>
</body> 
</html> 

上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
1.$(document).ready(function(){}),当文档结构完全加载再去执行函数中的代码。
2.$("#email").focus(function(){}),为文本框注册focus事件处理函数。
3.var email_txt=$(this).val(),获取文本框的value值。
4.if(email_txt==this.defaultValue){$(this).val("");},如果文本框的值和默认值相同,那么就将文本框清空。
5.$("#email").blur(function(){}),为文本框注册blur事件处理函数。
6.var email_txt=$(this).val(),获取文本框的值。
7.if(email_txt==""){$(this).val(this.defaultValue);},如果文本框值等于空,那么就将文本框的值还原为默认。
二.相关阅读:
1.focus事件可以参阅jQuery的focus事件一章节。
2.val()函数可以参阅jQuery的val()方法一章节。 
3.defaultValue属性可以参阅
javascript的text.defaultValue属性一章节。 
4.blur事件可以参阅jQuery的blur事件一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14210

更多内容可以参阅:http://www.softwhy.com/jquery/

jQuery实现点击文本框清除内容代码实例

标签:

原文地址:http://www.cnblogs.com/nulifendou/p/5178347.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!