清空 input 框 text 里面的 value值

最新推荐文章于 2023-08-21 19:35:44 发布

转载最新推荐文章于 2023-08-21 19:35:44 发布 · 5.4k 阅读

收录于

页面常用专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用原生JavaScript和jQuery为单个及多个输入框设置默认提示文字，并在获得焦点时清除这些文字，在失去焦点且为空时恢复默认提示。

单个input框的情况下:

window.onload= function() {
    var txt1=document.getElementByIdx_x_x("txt1"),dv="请输入";
    txt1.value=dv;
    txt1.onfocus= function() {
   //获取焦点时如果value跟默认值相同,清空文本框内容
    if(this.value==dv)
    this.value="";
    };
    txt1.onblur= function() {
   //失去焦点时,如果没有内容还显示默认值
    if(this.value=="")
    this.value=dv;
    };
}

多个input框的情况下:

 <html>
     <head>
     <title>test</title>
     <script src="jquery.js"></script>
     </head>
     <body>
     <form id="form" action="" method="get">
         <input type="text" name="First name" value="First name"/>
         <input type="text" name="Family name" value="Family name"/>
         <input type="text" name="Email" value="Email..."/>
         <input type="text" name="password" value="password..."/>
         <input type="text" name="location" value="City where you 

live"/>
         <input type="submit" name="sign up" value="Sign Up"/>
      </form>
 
      <script>
         $('#form').children(':text').focus(function(){
           if(!this.initValue){
          this.initValue = this.value;
          }
           if(this.value === this.initValue){
           this.value = '';
          }
       }).blur(function(){
           if(this.value === '' || this.value === null){
           this.value = this.initValue;
          }
       });
      </script>
    </body>
    </html>