vue解決IE9及以下不顯示placeholder的問題

參考文章連結
如果是 .html的專案，在需要的頁面引入jquery後再引入placeholder.js外掛即可解決

因為我是vue+elementUI的專案，所以不會每次切換選單都重新整理瀏覽器，所以整理了一下vue裡的用法

在這裡也需要引入jquery檔案，不然可能會報錯，在index.html裡引入jquery就可以了

接下來就是vue裡的用法了

首先在公共js檔案裡新建placeholder.js檔案，輸出一個PlaceholderInit函式

//解決ie下 input 的placeholder不顯示問題

export function PlaceholderInit() {
  return jQuery(function() {
    var placeholderfriend = {
      focus: function(s) {
        s = $(s)
          .hide()
          .prev()
          .show()
          .focus();
        var idValue = s.attr("id");
        if (idValue) {
          s.attr("id", idValue.replace("placeholderfriend", ""));
        }
        var clsValue = s.attr("class");
        if (clsValue) {
          s.attr("class", clsValue.replace("placeholderfriend", ""));
        }
      }
    };

    //判斷是否支援placeholder
    function isPlaceholer() {
      var input = document.createElement("input");
      return "placeholder" in input;
    }
    //不支援的程式碼
    if (!isPlaceholer()) {
      $(function() {
        var form = $(this);
        var elements = form.find("input[type='text'][placeholder]");
        elements.each(function() {
          var s = $(this);
          var pValue = s.attr("placeholder");
          var sValue = s.val();
          if (pValue) {
            if (sValue == "") {
              s.val(pValue);
            }
          }
        });

        elements.focus(function() {
          var s = $(this);
          var pValue = s.attr("placeholder");
          var sValue = s.val();
          if (sValue && pValue) {
            if (sValue == pValue) {
              s.val("");
            }
          }
        });

        elements.blur(function() {
          var s = $(this);
          var pValue = s.attr("placeholder");
          var sValue = s.val();
          if (!sValue) {
            s.val(pValue);
          }
        });

        var elementsPass = form.find("input[type='password'][placeholder]");
        elementsPass.each(function(i) {
          var s = $(this);
          var pValue = s.attr("placeholder");
          var sValue = s.val();
          if (pValue) {
            if (sValue == "") {
              var html = this.outerHTML || "";
              html = html
                .replace(
                  /\s*type=(['"])?password\1/gi,
                  " type=text placeholderfriend"
                )
                .replace(/\s*(?:value|on1[a-z]+|name)(=(['"])?\S*\1)?/gi, " ")
                .replace(
                  /\s*placeholderfriend/,
                  " placeholderfriend value='" +
                    pValue +
                    "' " +
                    "οnfοcus='placeholderfriendfocus(this);' "
                );
              var idValue = s.attr("id");
              if (idValue) {
                s.attr("id", idValue + "placeholderfriend");
              }
              var clsValue = s.attr("class");
              if (clsValue) {
                s.attr("class", clsValue + "placeholderfriend");
              }
              s.hide();
              s.after(html);
            }
          }
        });

        elementsPass.blur(function() {
          var s = $(this);
          var sValue = s.val();
          if (sValue == "") {
            var idValue = s.attr("id");
            if (idValue) {
              s.attr("id", idValue + "placeholderfriend");
            }
            var clsValue = s.attr("class");
            if (clsValue) {
              s.attr("class", clsValue + "placeholderfriend");
            }
            s.hide()
              .next()
              .show();
          }
        });
      });
    }
    window.placeholderfriendfocus = placeholderfriend.focus;
  });
}

在需要顯示placeholder的頁面解構出PlaceholderInit函式

import { PlaceholderInit } from '@/utils/placeholder'

在頁面顯示之前呼叫這個函式，這樣當前頁面需要顯示placeholder的地方在頁面進來的時候就會正常顯示

PlaceholderInit();

如果有新增彈框的輸入框頁需要顯示placeholder，在開啟新增彈框的時候同樣呼叫此函式

別的需要的地方使用方法也一樣