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

本文介绍一下文本框最简单的一个人性化措施，就是点击文本框的时候能够删除里面的提示文本。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery实现点击文本框清除内容的代码示例-搞代码gaodaima.com</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.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);}，如果文本框值等于空，那么就将文本框的值还原为默认。

本文案例为大家展示了《jQuery实现点击文本框清除内容的代码示例》的代码，若要看代码效果请大家点击“运行代码”按钮。

[code]<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>jQuery实现点击文本框清除内容的代码示例-搞代码gaodaima.com</title> <script type=”text/javascript” src=”http://libs.baidu.com/jquery/2.0.0/jquery.min.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>[/code]

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：jQuery实现点击文本框清除内容的代码示例

Hi，您需要填写昵称和邮箱！