輸入框占位符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");
          }
        })
      });

　　

也沒有什么高深的東西，只要能轉過這個彎來就可以了！