输入框去除默认的文字，jquery方法

需求：所有的输入框获取焦点时，去掉默认的提示文字，失去焦点时如果输入框为空，恢复默认的提示文字。

解决方案：jquery方法，以下有三种，按照利弊，我建议最后一种。

先看html代码：

<input type="text" id="address" value="请输入邮箱地址"/>   <br/><br/>
<input type="text" id="password" value="请输入邮箱密码"/>  <br/><br/>

方法一：

$(function(){
$('#address').focus(function(){
          if($(this).val()== "请输入邮箱地址"){
              $(this).val("");
          }
      });
      
      $('#address').blur(function(){
          if($(this).val()==""){
              $(this).val("请输入邮箱地址");
          }
      });
$("#password").focus(function(){
            var txt_value =  $(this).val();
            if(txt_value=="请输入邮箱密码"){
                $(this).val("");
            } 
      });
      $("#password").blur(function(){
              var txt_value =  $(this).val();
            if(txt_value==""){
                $(this).val("请输入邮箱密码");
            } 
      })


})

方法一中分别针对两个input，设置不同的id，进行分别的获取焦点和失去焦点的操作。原理没错，可扩展性太差，代码冗余，可升级为第二种方法，如下：

方法二：

$(function(){
      $('input').bind({
          focus:function(){
              var input_value=$(this).val();
              if(input_value == this.defaultValue){
                  $(this).val("");
              }
          },
          blur:function(){
              var input_value=$(this).val();
              if(input_value == ""){
                  $(this).val(this.defaultValue);
              }

          }
 })
})

优势是：通过input绑定了这个页面内所有的输入框，不需要每一个去设定操作。用bind绑定了失去焦点和获取焦点的操作，并且，用this.defaultValue代替了输入框内默认的文字，比米娜了因为默认文字的不同而单独去设置，减少了代码量。同事建议说，

this.defaultValue  还可以用html5里面新增加的新属性placeholder 或者  是在input内随意设置属性aa来实现，并且还可以延伸至验证输入框内的电话号码，身份证，以及用户名等，需要用到正则。目前还没有运用到，有机会补充。

<input type="text" id="address" value="" aa="请输入邮箱地址"/>

 

第三种方法：

$(function(){

$('input:text').each(function(){
          var input_text = $(this).val();
        $(this).focus(function(){
        if(input_text === $(this).val()) $(this).val('');

        })
        $(this).blur(function(){
          if($(this).val() == "") $(this).val(input_text);

      })
      })

});

这是目前在我看来比较精简的最佳方案，为了能在多个页面内的input都适用，建议将过滤选择器，设置为统一的class名，这样只需要在公用js文件内，写一次就可全站使用。