jQuery点击文本框清除内容代码实例
分类：实例代码
本章节介绍一下文本框最简单的一个人性化措施，就是点击文本框的时候能够删除里面的提示文本。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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）.blur事件参阅jQuery blur 事件一章节。