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

Rao CY發表於2019-04-16
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'
      }
  })
}  
複製程式碼

相關文章