摘要：屬性定義屬性規(guī)定可描述輸入字段預期值的簡短的提示信息比如一個樣本值或者預期格式的短描述。問題來源屬性給予了用戶很友好的提示，但是在老版本的瀏覽器中就不會起作用及之前的版本不支持屬性，這是一個很頭疼的問題，于是就產(chǎn)生了以下的思考。

placeholder屬性定義： placeholder 屬性規(guī)定可描述輸入字段預期值的簡短的提示信息（比如：一個樣本值或者預期格式的短描述）。

問題來源： placeholder屬性給予了用戶很友好的提示，但是在老版本的瀏覽器中就不會起作用（Internet Explorer 9 及之前的版本不支持 placeholder 屬性），這是一個很頭疼的問題，于是就產(chǎn)生了以下的思考。

判斷瀏覽器是否支持placeholder屬性

"placeholder" in document.createElement("input")

獲取當前頁面中的所有具有placeholder屬性的元素

document.querySelectorAll("[placeholder]")

由于document.querySelectorAll返回的是一個 NodeList 對象,需要將其通過Array.prototype.slice.call()將其轉換成數(shù)組，這樣我們就可以通過數(shù)組的forEach()方法對頁面中獲取到的所有元素進行遍歷

Array.prototype.slice.call(document.querySelectorAll("[placeholder]"))

對獲取到的頁面中的所有具有placeholder屬性的元素進行遍歷

nodes.forEach()

根據(jù)當前元素克隆出一個一樣的克隆節(jié)點(備注：這里的思想是這樣的，克隆出一個一樣的節(jié)點插入到當前節(jié)點的后面，當瀏覽器不支持placeholder屬性的時候，需要顯示placeholder屬性的信息，就將克隆節(jié)點顯示出來，將當前節(jié)點隱藏掉)

var cloneNode = item.cloneNode()

判斷節(jié)點的類型，如果節(jié)點的類型[type="password"],就將克隆節(jié)點的類型改為text

if (cloneNode.getAttribute("type").toLowerCase() === "password") {
  cloneNode.setAttribute("type", "text")
}

將克隆節(jié)點的placeholder屬性值，寫入value；并將此克隆節(jié)點隱藏

cloneNode.setAttribute("value", cloneNode.getAttribute("placeholder"))
cloneNode.style.display = "none"

將克隆節(jié)點插入到當前節(jié)點的后面

item.insertAdjacentHTML("afterend", cloneNode.outerHTML)

對克隆節(jié)點綁定focus事件，當克隆節(jié)點獲取焦點時，將克隆節(jié)點隱藏，并將當前節(jié)點顯示出來，并將當前節(jié)點獲取焦點

item.nextSibling.addEventListener("focus", function () {
  this.style.display = "none"
  this.previousSibling.style.display = "inline"
  this.previousSibling.focus()
})

對當前節(jié)點綁定focus事件，當前節(jié)點獲取焦點時，將緊跟在當前節(jié)點后面的克隆節(jié)點隱藏掉

item.addEventListener("focus", function () {
  this.nextSibling.style.display = "none"
})

對當前節(jié)點綁定blur事件，當前節(jié)點失去焦點時，如果當前節(jié)點沒有進行任何輸入，則需要對齊進行placeholder提示，這時就將當前節(jié)點隱藏，將緊跟在當前節(jié)點后面的克隆節(jié)點顯示出來

item.addEventListener("blur", function () {
  if (!this.value) {
      this.style.display = "none"
      this.nextSibling.style.display = "inline"
  }
})

在頁面初始化完成后，判斷當前節(jié)點是否有初始輸入值，如果沒有的話，將當前節(jié)點隱藏，將緊跟在當前節(jié)點后的克隆節(jié)點顯示出來

if (!item.value) {
  item.style.display = "none"
  item.nextSibling.style.display = "inline"
}

  if (!("placeholder" in document.createElement("input"))) {
      // 將返回的nodeList對象轉為數(shù)組
      var nodes = Array.prototype.slice.call(document.querySelectorAll("[placeholder]"))
      nodes.forEach(function (item, index) {
          item.addEventListener("focus", function () {
              this.nextSibling.style.display = "none"
          })
          item.addEventListener("blur", function () {
              if (!this.value) {
                  this.style.display = "none"
                  this.nextSibling.style.display = "inline"
              }
          })
          var cloneNode = item.cloneNode()
          // 如果[type="password"]類型，則轉為text
          if (cloneNode.getAttribute("type").toLowerCase() === "password") {
              cloneNode.setAttribute("type", "text")
          }
          cloneNode.setAttribute("value", cloneNode.getAttribute("placeholder"))
          cloneNode.style.display = "none"
          item.insertAdjacentHTML("afterend", cloneNode.outerHTML)
          item.nextSibling.addEventListener("focus", function () {
              this.style.display = "none"
              this.previousSibling.style.display = "inline"
              this.previousSibling.focus()
          })
          if (!item.value) {
              item.style.display = "none"
              item.nextSibling.style.display = "inline"
          }
      })
  }

由于本人學識有限，有很多需要提升的地方，望大家多多指教。