search

Home >Web Front-end >JS Tutorial >jQuery implements the function of setting and removing the default value of text box

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

韦小宝
韦小宝Original
2017-11-28 10:00:321563browse

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>

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;
               }
       });
});

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 websiteSearchOh~

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!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript countdown timer implementation methodNext article：JavaScript countdown timer implementation method

Related articles

See more