有關placeholder在ie9中的一點折騰

時間 2019-12-10

標籤有關 placeholder ie9 一點 1點折騰简体版

原文原文鏈接

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

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

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

解決思路

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

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

獲取當前頁面中的全部具備placeholder屬性的元素
```
document.querySelectorAll('[placeholder]')
```
因爲document.querySelectorAll返回的是一個 NodeList 對象,須要將其經過Array.prototype.slice.call()將其轉換成數組，這樣咱們就能夠經過數組的forEach()方法對頁面中獲取到的全部元素進行遍歷
```
Array.prototype.slice.call(document.querySelectorAll('[placeholder]'))
```
對獲取到的頁面中的全部具備placeholder屬性的元素進行遍歷
```
nodes.forEach()
```
根據當前元素克隆出一個同樣的克隆節點(備註：這裏的思想是這樣的，克隆出一個同樣的節點插入到當前節點的後面，當瀏覽器不支持placeholder屬性的時候，須要顯示placeholder屬性的信息，就將克隆節點顯示出來，將當前節點隱藏掉)
```
var cloneNode = item.cloneNode()
```

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

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

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

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

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

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

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

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

對當前節點綁定focus事件，當前節點獲取焦點時，將緊跟在當前節點後面的克隆節點隱藏掉
```
item.addEventListener('focus', function () {
  this.nextSibling.style.display = 'none'
})
```
對當前節點綁定blur事件，當前節點失去焦點時，若是當前節點沒有進行任何輸入，則須要對齊進行placeholder提示，這時就將當前節點隱藏，將緊跟在當前節點後面的克隆節點顯示出來
```
item.addEventListener('blur', function () {
  if (!this.value) {
      this.style.display = 'none'
      this.nextSibling.style.display = 'inline'
  }
})
```
在頁面初始化完成後，判斷當前節點是否有初始輸入值，若是沒有的話，將當前節點隱藏，將緊跟在當前節點後的克隆節點顯示出來
```
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'
          }
      })
  }