外星人源码论坛 首页 编程经验 有关placeholder在ie9中的一点折腾

有关placeholder在ie9中的一点折腾

2018-3-5 06:52
原作者: 外星人源码网 来自: 外星人源码网 收藏 分享 邀请

有关placeholder在ie9中的一点折腾。 placeholder属性定义: placeholder 属性规定可描述输入字段预期值的简短的提示信息(比如:一个样本值或者预期格式的短描述)。问题来源: placeholder属性给予了用户很友好的 ...

有关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'
          }
      })
  }

由于本人学识有限,有很多需要提升的地方,望大家多多指教。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

粉丝 阅读121 回复0
上一篇:
CentOS6 mininal 安装CouchDB2 详细版发布时间:2018-03-05
下一篇:
SnapKit代码布局登录示例发布时间:2018-03-05
推荐资讯
阅读排行
国内最专业的源码技术交流社区
全国免费热线电话

0373-5171417

周一至周日9:00-23:00

反馈建议

admin@eenot.com 在线QQ咨询

扫描二维码关注我们