有关placeholder在ie9中的一点折腾

Posted 2020-11-28 10manongit

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了有关placeholder在ie9中的一点折腾相关的知识，希望对你有一定的参考价值。

有关placeholder在ie9中的一点折腾。

placeholder属性定义： placeholder 属性规定可描述输入字段预期值的简短的提示信息（比如：一个样本值或者预期格式的短描述）。

问题来源： placeholder属性给予了用户很友好的提示，但是在老版本的浏览器中就不会起作用（Internet Explorer 9 及之前的版本不支持 placeholder 属性），这是一个很头疼的问题，于是就产生了以下的思考。

解决思路

判断浏览器是否支持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‘
          }
      })
  }