有关placeholder在ie9中的一点折腾
2024-09-05 01:11:55
有关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'
}
})
}
由于本人学识有限,有很多需要提升的地方,望大家多多指教。
本文转载于:猿2048➩https://www.mk2048.com/blog/blog.php?id=h1jjhaia20j
最新文章
- hdu 1247:Hat’s Words(字典树,经典题)
- PHP学习笔记 - 入门篇(5)
- spring-security用户权限认证框架
- 包含为 HTTP 定义的状态代码的值(枚举)
- Strust2 <;c:forEach>; 循环控制标签
- vs2012 设计器 视图异常
- BZOJ 2463 谁能赢呢? (博弈论)
- UITextField 设置 placeholder 的字体颜色方法
- 用R画有图例的中国地图
- CoolBlog开发笔记第5课:请求与响应
- sql中关于存在就不做操作的代码块
- yum安装k8s集群(kubernetes)
- 2017-12-15python全栈9期第二天第七节之x or y ,x 为 非 0时,则返回x
- iOS链接库的冲突
- Word所有字体按比例缩小
- 在Ubuntu上安装微信
- SecureCRT SSH连接一直提示密码错误
- 洛谷3197&;bzoj1008 越狱
- (剑指Offer)面试题58:二叉树的下一个结点
- C++ error C2064:
热门文章
- k8s-coredns 介绍和部署
- 千万级 PV是什么意思?
- sprintf的用法总结
- Azure KeyVault(四)另类在 .NET Core 上操作 Secrets 的类库方法-----Azure.Security.KeyVault.Secrets
- linux curl 的用法指南
- C#+SQL Server的数据库管理系统常用的代码
- Web调试工具之调试方法
- 程序设计基础&#183;Java学习笔记&#183;面向对象(上)
- Kafka 分区数可以增加或减少吗?为什么?
- java-設計模式-抽象工場模式