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

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

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

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

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

獲取當(dāng)前頁面中的所有具有placeholder屬性的元素

document.querySelectorAll("[placeholder]")

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

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

對(duì)獲取到的頁面中的所有具有placeholder屬性的元素進(jìn)行遍歷

nodes.forEach()

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

var cloneNode = item.cloneNode()

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

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

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

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

將克隆節(jié)點(diǎn)插入到當(dāng)前節(jié)點(diǎn)的后面

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

對(duì)克隆節(jié)點(diǎn)綁定focus事件，當(dāng)克隆節(jié)點(diǎn)獲取焦點(diǎn)時(shí)，將克隆節(jié)點(diǎn)隱藏，并將當(dāng)前節(jié)點(diǎn)顯示出來，并將當(dāng)前節(jié)點(diǎn)獲取焦點(diǎn)

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

對(duì)當(dāng)前節(jié)點(diǎn)綁定focus事件，當(dāng)前節(jié)點(diǎn)獲取焦點(diǎn)時(shí)，將緊跟在當(dāng)前節(jié)點(diǎn)后面的克隆節(jié)點(diǎn)隱藏掉

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

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

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

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

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

  if (!("placeholder" in document.createElement("input"))) {
      // 將返回的nodeList對(duì)象轉(zhuǎn)為數(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"]類型，則轉(zhuǎn)為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"
          }
      })
  }

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