有关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'
}
})
}
由于本人学识有限,有很多需要提升的地方,望大家多多指教。
本文转载于:猿2048➩https://www.mk2048.com/blog/blog.php?id=h1jjhaia20j
有关placeholder在ie9中的一点折腾的更多相关文章
- 代码在ie9中不能正确执行
<!DOCTYPE html> <html> <head lang="zh"> <meta charset="UTF-8&quo ...
- 关于delphi点击webbrowser中任意一点的问题
关于delphi点击webbrowser中任意一点的问题 有时候我们需要delphi载入webbrowser1打开网页的时候 需要点击某一个点的位置 可能是坐标 可能是按钮 可能是其他的控件应该如何来 ...
- 关于IE9中webdiriver使用autoit上传文件报错
在ie9中, type="file"的元素是通过js打开的 webdirver结合autoit上传文件时,会报拒绝访问的错 sciTE编辑器中是这样写的: #include < ...
- IE9中Media queries在iframe无效的解决方法
在css中有5个media querie @media screen and(min-width:0px)and(max-width:319px){ body {background-color:re ...
- placeholder在IE8中兼容性问题解决
placeholder是HTML5中的一个属性,可以在文本框中设置placeholder属性来显示一些提示性的文字,但对IE10以下的浏览器不支持,下面方法可以让placeholder能够使用在IE1 ...
- .NET在IE9中页面间URL传递中文变成乱码的解决办法
在.Net的项目中,鼠标点击查询按钮,转到查询页面,但URL中包含中文时,传到服务器端后,中文变成了乱码(只有IE9出现该问题). 尝试使用Server.UrlEncode()进行编码, ...
- EasyUI在window中使用kindeditor 4.1.10在IE9中不能回显、获得焦点编辑的问题
描述 :kindeditor4.1.10版本是当前最新的版本,在浏览器兼容性和功能方面都是值得一赞的,在开发中能方便快捷的满足一些开发需求. 问题 : 问题总是有的. 在使用过程中,遇到EasyU ...
- IE9中ajax请求成功后返回值却是undefined
ie9中ajax请求一般处理程序成功后返回值始终是undefined,在网上找过很多资料,大致意思都是说前后端编码不一致造成的,但是按照资料上的方案去修改却发现根本不能解决我的问题,试过好多种方案都不 ...
- ckfinder在IE10,IE9中的弹出框不能选择,或者不能上传解决方法
在IE9,或IE10中ckfinder在IE10,IE9中的弹出框不能选择,或者不能上传解决方法 把弹出框嵌入到jquery dialog中.可以解决 I did: // javascript f ...
随机推荐
- c# 表格控件SourceGrid使用总结
网上SourceGrid相关的资料很少,使用过程中做了下记录,以便日后查用 1:初始化 this.grid = new SourceGrid.Grid(); this.grid.Size = new ...
- jq获取不包含某些属性的元素
最近写项目,有个功能实现checkbox全选,但是被禁用的checkbox不能选中 点击全选后发现禁用checkbox的也被选中了,不符合需求. 但是想了半天,属性选择器都是判断某个属性值的,没有判断 ...
- netty系列之:EventLoop,EventLoopGroup和netty的默认实现
目录 简介 EventLoopGroup和EventLoop EventLoopGroup在netty中的默认实现 EventLoop在netty中的默认实现 总结 简介 在netty中不管是服务器端 ...
- Dapr 弹性的策略
云原生应用需要处理 云中很容易出现瞬时故障.原因在以下文档 暂时性故障处理[1] 中有具体说明. 任何环境.任何平台或操作系统以及任何类型的应用程序都会发生暂时性故障. 在本地基础结构上运行的解决方案 ...
- centeros 命令
一.查看系统时间.硬件时间 # date // 查看系统时间 #hwclock // 查看硬件时间 二.时间服务器上的时间同步的方法 安装ntpdate工具 # yum -y install ntp ...
- 10、mysql的调优
mysql的调优 调优的最终目的:节省系统资源.提高响应速度下面从6个维度对mysql进行优化. 第一步:对服务器的参数进行调优 通过show profile命令分析,如果sql语句在执行过程中等待时 ...
- svelte组件:Svelte自定义弹窗Popup组件|svelte移动端弹框组件
基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式) 前几天有分享一个svelte自定义tabbar+navbar组件,今天继续带来svelte自定义弹窗组件. svPopup ...
- github:git clone下载加速以及vim-plug下载插件加速
git clone 下载加速 1. 先在github将仓库地址复制下来 2. git clone时将https://github.com/* 改为https://gitclone.com/github ...
- 搭建Loki、Promtail、Grafana轻量级日志系统(centos7)
搭建Loki.Promtail.Grafana轻量级日志系统(centos7)--简称PLG 需求 公司项目采用微服务的架构,服务很多,每个服务都有自己的日志,分别存放在不同的服务器上.当查找日志时需 ...
- Windows服务器上搭建Windows2003+IIS+ASP.NET+MSSQL网站
一.安装IIS服务 1. 选择"开始"→"所有程序"→"管理工具"→"管理您的服务器"菜单命令,启动"添加或删 ...