jQuery implements the function of setting and removing the default value of text box-JS Tutorial-php.cn

jQuery implements the function of setting and removing the default value of text box

韦小宝

Release： 2017-11-28 10:00:32

Original

1446 people have browsed it

jQuery implements the default value of the text box to sense mouse movements. This chapter introduces how to use jQuery to implement the default value of the text box to sense mouse movements. function. There is jQuery code~

For example, when the text box gets the mouse focus, the default value will be cleared. When there is no input content in the text box, the mouse focus leaves. time, it will return to the default value.
Code example:

<!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>

Copy after login

The above code implementation In order to meet our requirements, here is a brief introduction to its implementation principle:

It is very simple, just register the focus and blur event processing functions for the text box. When the text box gets the focus, If the content of the text box is the same as the default value, the text box will be cleared. When the focus leaves the text box, if the content of the text box is empty, it will be restored to the default value.

Or use the following code:

$(&#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;
               }
       });
});

Copy after login

The above is the content of jQuery to implement the function of setting and removing the default value of the text box. For more information, please go to PHP Chinese website SearchOh~

Related recommendations:

##Detailed explanation of jQuery animation and special effects

About the secret of jQuery

Detailed explanation of the use of Jquery pop-up layer ThickBox plug-in

The above is the detailed content of jQuery implements the function of setting and removing the default value of text box. For more information, please follow other related articles on the PHP Chinese website!