有關placeholder在ie9中的一點折騰。

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

問題： placeholder屬性給予了用戶很友好的提示，可是在老版本的瀏覽器中就不會起做用（Internet Explorer 9 及以前的版本不支持 placeholder 屬性），這是一個很頭疼的問題，因而就產生了如下的思考。

解決方案:

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

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

2.獲取當前頁面中的全部具備placeholder屬性的元素

document.querySelectorAll('[placeholder]')

3.因爲document.querySelectorAll返回的是一個 NodeList 對象,須要將其經過Array.prototype.slice.call()將其轉換成數組，這樣咱們就能夠經過數組的forEach()方法對頁面中獲取到的全部元素進行遍歷

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

4.對獲取到的頁面中的全部具備placeholder屬性的元素進行遍歷

nodes.forEach()

5.根據當前元素克隆出一個同樣的克隆節點(備註：這裏的思想是這樣的，克隆出一個同樣的節點插入到當前節點的後面，當瀏覽器不支持placeholder屬性的時候，須要顯示placeholder屬性的信息，就將克隆節點顯示出來，將當前節點隱藏掉)

var cloneNode = item.cloneNode()

6.判斷節點的類型，若是節點的類型[type="password"],就將克隆節點的類型改成text

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

7.將克隆節點的placeholder屬性值，寫入value；並將此克隆節點隱藏

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

8.將克隆節點插入到當前節點的後面

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

9.對克隆節點綁定focus事件，當克隆節點獲取焦點時，將克隆節點隱藏，並將當前節點顯示出來，並將當前節點獲取焦點

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

10對當前節點綁定focus事件，當前節點獲取焦點時，將緊跟在當前節點後面的克隆節點隱藏掉

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

11.對當前節點綁定blur事件，當前節點失去焦點時，若是當前節點沒有進行任何輸入，則須要對齊進行placeholder提示，這時就將當前節點隱藏，將緊跟在當前節點後面的克隆節點顯示出來

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

12.在頁面初始化完成後，判斷當前節點是否有初始輸入值，若是沒有的話，將當前節點隱藏，將緊跟在當前節點後的克隆節點顯示出來

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

總體代碼

if (!('placeholder' in document.createElement('input'))) { 
  // 將返回的nodeList對象轉爲數組
  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'
      }
  })
}  
複製代碼