jQuery实现设置、移除文本框默认值功能

来源：动视网责编：小采时间：2020-11-27 20:10:57

jQuery实现设置、移除文本框默认值功能

jQuery实现设置、移除文本框默认值功能:jQuery实现的文本框默认值感应鼠标动作，本章节介绍一下如何利用jQuery实现文本框默认值感应鼠标动作的功能。有jQuery代码哦~比如当文本框获取鼠标焦点的时候，默认值会被清空，当文本框没有输入内容，鼠标焦点离开的时候，又会恢复到默认值。代码实例:&l

推荐度：

点击下载本文 文档为doc格式

导读jQuery实现设置、移除文本框默认值功能:jQuery实现的文本框默认值感应鼠标动作，本章节介绍一下如何利用jQuery实现文本框默认值感应鼠标动作的功能。有jQuery代码哦~比如当文本框获取鼠标焦点的时候，默认值会被清空，当文本框没有输入内容，鼠标焦点离开的时候，又会恢复到默认值。代码实例:&l

jQuery实现的文本框默认值感应鼠标动作，本章节介绍一下如何利用jQuery实现文本框默认值感应鼠标动作的功能。有jQuery代码哦~

比如当文本框获取鼠标焦点的时候，默认值会被清空，当文本框没有输入内容，鼠标焦点离开的时候，又会恢复到默认值。
代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>程序员之家</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.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> 
<p><input type="text" value="请输入邮箱地址" id="email"/></p> 
</body> 
</html>

上面的代码实现了我们的要求，下面简单介绍一下它的实现原理：

非常的简单，就是为文本框注册focus和blur事件处理函数，当文本框获取焦点的时候，如果文本框的内容和默认值相同，那么就会清空文本框，当焦点离开文本框的时候，如果文本框的内容为空，那么就会恢复到默认值。

或者使用下面的代码：

$('.default-value').each(function() {
 var default_value = this.value;
 $(this).focus(function(){
 if(this.value == default_value) {
 this.value = '';
 }
 });
 $(this).blur(function(){
 if(this.value == '') {
 this.value = default_value;
 }
 });
});

jQuery实现设置、移除文本框默认值功能

推荐度：

点击下载本文 文档为doc格式

标签：功能文本框设定

热门焦点

jQuery实现设置、移除文本框默认值功能

jQuery实现设置、移除文本框默认值功能

jQuery实现设置、移除文本框默认值功能

最新推荐

猜你喜欢

热门推荐