placeholder在不同浏览器下的表现及兼容方法
2019独角兽企业重金招聘Python工程师标准>>>
1、什么是placeholder?
placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或输入内容)时,提示文字消失。
写法如下:
2、placeholder的浏览器兼容性和在不同浏览器下的表现
由于placeholder是html5的新属性,可想而知,仅支持html5的浏览器才支持placeholder,目前最新的firefox、chrome、safari以及ie10都支持,ie6到ie9都不支持。
下面是其在各个浏览器下的显示效果:
firefox:
chrome:
safari:
ie10:
可以看出,placeholder的文字在各个浏览器下基本都是淡灰色显示。
不同的地方在于,在ff和chrome下,输入框获得焦点时,placeholder文字没有变化,只有当输入框中输入了内容时,placeholder文字才消失;而在safari和ie10下,当输入框获得焦点时,placeholder文字便立即消失。
默认情况下,placeholder的文字是灰色,输入的文字是黑色。而我们拿到的设计稿上的色值往往并不与默认情况下完全一致。那么,如何修改placeholder的色值呢?
如果直接写input{color:red;},可以看到,ie10和ff下,placeholder文字和输入文字都变成了红色,如下:
ff:
ie10:
而在chrome和safari下,placeholder文字颜色不变,只有输入的文字变成红色。
显然,这种做法是行不通的。因为我们只想改变placeholder文字的颜色,并不想改变输入文字的颜色。
正确的写法如下:
::-moz-placeholder{color:red;} //ff
::-webkit-input-placeholder{color:red;} //chrome,safari
:-ms-input-placeholder{color:red;} //ie10
3、如何使placeholder兼容所有浏览器
前面我们知道了,ie6到ie9并不支持原生的placeholder,并且即使在支持原生placeholder的浏览器上,其表现也并不一致。在实际项目中,如何使所有浏览器都一致地支持placeholder呢?
(1)如果只需要让不支持placeholder的浏览器能够支持改功能,并不要求支持原生placeholder的浏览器表现一致,那么可以采用如下方法:
function placeholder(nodes,pcolor) {
if(nodes.length && !("placeholder" in document_createElement_x("input"))){
for(i=0;i
var self = nodes[i],
placeholder = self.getAttribute('placeholder') || '';
self.onfocus = function(){
if(self.value == placeholder){
self.value = '';
self.style.color = "";
}
}
self.onblur = function(){
if(self.value == ''){
self.value = placeholder;
self.style.color = pcolor;
}
}
self.value = placeholder;
self.style.color = pcolor;
}
}
}
(2)如果需要自定义样式,并且希望placeholder在所有浏览器下表现一致,可以通过利用label标签模拟一个placeholder的样式放到输入框上,当输入框获得焦点的时候,隐藏label,当输入框失去焦点的时候,显示label。
或者是在input上应用背景图片,获得和失去焦点的时候切换背景图片是否显示。
实现方法有很多种,欢迎大家各抒已见。
转载于:https://my.oschina.net/china008/blog/397185
placeholder在不同浏览器下的表现及兼容方法相关推荐
- IE浏览器下常见的CSS兼容问题
宽高bug [1]IE6-浏览器下子元素能撑开父级设置好的宽高 <!DOCTYPE html> <htmllang="en"> <head> & ...
- placeholder在某些浏览器下不垂直居中问题
将input的line-height设置为normal即可,让浏览器自己去判断 转载于:https://blog.51cto.com/chenhuixfyy/1359275
- vue框架在ie浏览器下的问题以及解决方法
vue浏览器兼容性问题ie9 ie10 edge vue 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性,比如Object.defineP ...
- html游戏禁止微信浏览器下拉,JavaScript实现禁止微信浏览器下拉回弹效果
这篇文章主要为大家详细介绍了JavaScript禁止微信浏览器下拉回弹效果的方法,具有一定的参考和学习JavaScript的价值,对JavaScript感兴趣的小伙伴们可以参考一下本篇文章 本文实例为 ...
- 浏览器css bug及bug解决方法
Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px; ...
- Flex 布局在IE浏览器下的兼容问题
Flex 布局在IE浏览器下的兼容问题 原文地址:gitub上的Flexbugs list,可以看到Flex布局在IE糟糕表现的详细描述. 2. Column flex items set to al ...
- 在不同的浏览器下FORM及它的小伙伴们默认样式的CSS属性值是不完全一致
我们一般在定义CSS样式的时候都需要定义去掉HTML标签默认样式的CSS,原因是在不同的浏览器下面它们的表现出来的默认样式不完全一致,我们要保证在不同的浏览器下它们能正常显示出我们想要达到的预期效果, ...
- Safari浏览器下colgroup失效导致表格列宽均分
Safari浏览器下colgroup失效导致表格列宽均分 表现 原因 解决 表现 使用原生tabel标签写表格,由于需要对表头做特殊处理,所以采用两个表格组装的方式写,表头也是用单独的table标签写 ...
- Element-UI在safari浏览器下table列表无法对齐的问题
由于Element-UI的table列表会在两个column中间添加一条能够拖动的竖线,(可能表现的不明显以至于很多人并没有发现,但是竖线是确实存在的.)在safari浏览器下这个竖线的样式无法正确渲 ...
最新文章
- 如何用asp.net实现校验功能!
- Spring Web Flow实例教程
- 最简单的基于FFmpeg的编码器-纯净版(不包含libavformat)
- 如何分辨PoE工业交换机是否标准供电
- 【c++ Primer 】 4.10复习题 12题(int)、(int)和(int*)
- 程序猿,这里有你想学的10门机器学习课程 | 资源
- 电脑的声卡驱动无法识别,扬声器麦克风无法使用
- 《又到毕业季》MATLAB GUI 鼠标键盘交互
- 测量应用程序cass和cad的使用感受
- Android Q适配攻略(五)(存储权限变更)
- 计算两个数之差的绝对值
- 我的高中时代──纪念1995年进入高中20周年
- java 根据pdf模板表单生成对应pdf(用于荣誉证书等生成)
- RX7900XT相当于什么显卡 RX7900XT显卡什么水平 RX7900XT显卡怎么样
- 属性级情感分析(于restaurant14和laptop14数据集上使用LSTM和GRU、 MemNet和IAN以及CNN等)的对比分析
- 经典管理定理二十三条点评
- 【Jmeter常用断言组件】
- iOS开发 - 二维码的生成与读取
- 双重差分模型能做固定效应吗_Stata:双重差分的固定效应模型 (DID)
- 叉乘点乘混合运算公式_初中数学根式运算法则公式