cari

Rumah  >  Artikel  >  hujung hadapan web  >  jQuery实现设置、移除文本框默认值功能

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

韦小宝
韦小宝asal
2017-11-28 10:00:321436semak imbas

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事件处理函数，当文本框获取焦点的时候，如果文本框的内容和默认值相同，那么就会清空文本框，当焦点离开文本框的时候，如果文本框的内容为空，那么就会恢复到默认值。

或者使用下面的代码：

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

以上就是jQuery实现设置、移除文本框默认值功能的内容了，更多请到PHP中文网搜索哦~

相关推荐：

jQuery动画与特效详解

关于 jQuery的秘密

Jquery弹出层ThickBox插件的使用详解

Atas ialah kandungan terperinci jQuery实现设置、移除文本框默认值功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript分秒倒计时器实现方法Artikel seterusnya：处理JavaScript异常的方法

Artikel berkaitan

Lihat lagi