输入框占位符placeholder

占位符placeholder的益处不用多说，但是很不幸的是，在IE8之前的浏览器里是无法实现placeholder这一属性的，所以在需要兼容IE8之前的浏览器的情况下，我们不得不想办法模拟实现placeholder属性。

在前面的一篇文中《获取表单的初始值，模拟placeholder属性》中，就曾经讲过placeholder属性的模拟，这里再翻出来一遍，是因为又遇到了新的问题。

当输入值之后，再刷新页面，在火狐浏览器中，获取到的defaultValue会是新的输入值。

直接以之前的项目中一小段代码为例：

    <ul class="query-box">
        <li><input type="text" value="请输入8位准考证号" placeholder="请输入8位准考证号" tabindex="1"></li>
        <li class="img-verification">
          <input type="text" value="请输入验证码" placeholder="请输入验证码" tabindex="2">
          <div><img src="images/logo.png" alt=""></div>
        </li>
        <li>
          <button tabindex="3">查询</button>
        </li>
      </ul>

该项目需要兼容到IE8，所以这里就必须解决IE8不支持placeholder这一属性的问题。项目中使用了jquery。

最开始的想法，就是使用初始值的方法，但是在火狐浏览器中测试时，发现了bug，当输入值之后，再刷新页面，火狐浏览器会记住所输入的值，作为初始值，导致不能完全模拟placeholder。只能转换方向，还是直接使用jquery方法来解决吧！

   var permissionNum = /^\d{8}$/; 
　　$(".query-box").find("input[type=text]").each(function (index, item) {
        var defaultVal = $(this).prop('placeholder');
        $(this).on("focus keydown", function () {
          var val = $(this).val();
          if (val == defaultVal) {
            $(this).val("").css("color", "#448aca");
          }
        }).on("blur keyup", function () {
          var val = $(this).val();
          if (val == "") {
            $(this).val(defaultVal).css("color", "#bababa");
          }
          // 校验准考证号码，符合8位数字，就高亮查询按钮
          if (index == 0) {
            var $target = $(this).parents(".query-box").find("button");
            permissionNum.test(val) ? $target.addClass("active") : $target.removeClass("active");
          }
        })
      });

也没有什么高深的东西，只要能转过这个弯来就可以了！

输入框占位符placeholder

推荐阅读