资讯专栏INFORMATION COLUMN

有关placeholder在ie9中的一点折腾

Warren / 3292人阅读

摘要:属性定义属性规定可描述输入字段预期值的简短的提示信息比如一个样本值或者预期格式的短描述。问题来源属性给予了用户很友好的提示,但是在老版本的浏览器中就不会起作用及之前的版本不支持属性,这是一个很头疼的问题,于是就产生了以下的思考。

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/91819.html

相关文章

  • 前端_JavaScript

    摘要:为此决定自研一个富文本编辑器。例如当要转化的对象有环存在时子节点属性赋值了父节点的引用,为了关于函数式编程的思考作者李英杰,美团金融前端团队成员。只有正确使用作用域,才能使用优秀的设计模式,帮助你规避副作用。 JavaScript 专题之惰性函数 JavaScript 专题系列第十五篇,讲解惰性函数 需求 我们现在需要写一个 foo 函数,这个函数返回首次调用时的 Date 对象,注意...

    Benedict Evans 评论0 收藏0
  • 转:CSS :placeholder-shown伪类实现Material Design占位符交互效果

    摘要:转自伪类实现占位符交互效果一规范中占位符交互效果风格占位符交互效果官方示意见此页面。我们可以采用绝对定位最后,对这个元素在输入框时候,以及非显示的时候进行重定位缩小并位移到上方四清除按钮部分上是必要属性,配合伪类实现我们的效果。 转自: https://github.com/yougola/bl... CSS :placeholder-shown伪类实现Material Design占...

    gaara 评论0 收藏0
  • getComputedStyle方法的那些事

    摘要:返回的是一个样式声明对象,只读。方法返回一个最初值对象或值列表对象,这取决于属性值的类型。而且,虽然中,对象支持方法,但总是返回因此,目前来讲,方法可以先不闻不问。本文转载之张鑫旭的博客 一、getComputedStyle是?getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclara...

    Baoyuan 评论0 收藏0
  • getComputedStyle方法的那些事

    摘要:返回的是一个样式声明对象,只读。方法返回一个最初值对象或值列表对象,这取决于属性值的类型。而且,虽然中,对象支持方法,但总是返回因此,目前来讲,方法可以先不闻不问。本文转载之张鑫旭的博客 一、getComputedStyle是?getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclara...

    W_BinaryTree 评论0 收藏0

发表评论

0条评论

Warren

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<