placeholder在IE下的兼容问题
最近写项目要求兼容到ie8,写完了去ie测试的时候,发现了placeholder在ie下的兼容问题,为了解决,搜罗网上各种牛人的解决方案,自己总结如下:
css样式(设置各浏览器下placeholder的样式问题):
//谷歌浏览器
input::-webkit-input-placeholder{
font-family: "Microsoft Yahei", 微软雅黑, sans-serif,"Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", STHeiti, 华文细黑,"PingFang SC";
font-size:14px;
color:#ccc;
}
//火狐4-18使用伪类
input::-moz-placeholder{
font-family: "Microsoft Yahei", 微软雅黑, sans-serif,"Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", STHeiti, 华文细黑,"PingFang SC";
font-size:14px;
color:#ccc;
}
//火狐19+使用伪元素
input:-moz-placeholder{
font-family: "Microsoft Yahei", 微软雅黑, sans-serif,"Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", STHeiti, 华文细黑,"PingFang SC";
font-size:14px;
color:#ccc;
}
//IE10使用伪类
input::-ms-input-placeholder{
font-family: "Microsoft Yahei", 微软雅黑, sans-serif,"Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", STHeiti, 华文细黑,"PingFang SC";
font-size:14px;
color:#ccc;
}
js代码(判断是否支持placeholder)
if( !('placeholder' in document.createElement('input')) ){
$('input[placeholder],textarea[placeholder]').each(function(){
var that = $(this),
text= that.attr('placeholder');
if(that.val()===""){
that.val(text).addClass('placeholder');
}
that.focus(function(){
if(that.val()===text){
that.val("").removeClass('placeholder');
}
})
.blur(function(){
if(that.val()===""){
that.val(text).addClass('placeholder');
}
})
.closest('form').submit(function(){
if(that.val() === text){
that.val('');
}
});
});
}
在input输入数字后,会出现黄色的背景,解决代码如下:
nput:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
input[type=text]:focus, input[type=password]:focus, textarea:focus {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
placeholder在IE下的兼容问题的更多相关文章
- input的placeholder在ie9下不兼容的结局办法。
/* IE9placeholder支持 */ if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder ...
- input 的 placeholder属性在IE8下的兼容处理
placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...
- html5的placeholder属性(IE如何兼容placeholder属性)
界面UI推荐 jquery html5 实现placeholder兼容password IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...
- 解决360、猎豹浏览器等极速模式下css3兼容问题
有时候你会发现你写的animation动画的css3效果,在IE.谷歌.火狐等主流的新版本的浏览器的是没有什么兼容问题的,即便你不写前缀,也是可以显示动画效果的.然后,你本地在360浏览器或猎豹浏览器 ...
- 0c-42-ARC模式下如何兼容非ARC的类
1.ARC模式下如何兼容非ARC的类 让程序兼容ARC和非ARC部分.转变为非ARC -fno-objc-arc 2.将MRC转换为ARC ARC也需要考虑循环引用问题:一端用strong,一端用we ...
- input 光标在 chrome下不兼容 解决方案
input 光标在 chrome下不兼容 解决方案 height: 52px; line-height: normal; line-height:52px\9 .list li input[type= ...
- [转]FireFox与IE 下js兼容触发click事件的代码
本文转自:http://www.jb51.net/article/16549.htm FireFox与IE 下js兼容触发click事件 ,对于需要兼容这两者的朋友,就需要参考下下面的代码了<a ...
- 1.ARC模式下如何兼容非ARC的类
ARC模式下如何兼容非ARC的类 :转变为ARC的, -f-objc-arc 非ARC模式下如何兼容ARC的类 :转变为非ARC -fno-objc-arc
- ie下不支持placeholder 用jquery来完成兼容
这是我的第一个博客,还是写点正经的,希望对做前端朋友有所帮助.最近在做的项目placeholder不兼容ie,这个可以兼容IE的输入框的HTML新增的placeholder的显示下面是代码:$( do ...
随机推荐
- 2016蓝桥杯省赛C/C++A组第二题 跳蚱蜢
题意:有9只盘子,排成1个圆圈. 其中8只盘子内装着8只蚱蜢,有一个是空盘. 我们把这些蚱蜢顺时针编号为 1~8 每只蚱蜢都可以跳到相邻的空盘中,也可以再用点力,越过一个相邻的蚱蜢跳到空盘中. 请 ...
- POJ 3994:Probability One
Probability One Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1674 Accepted: 1151 D ...
- NRF52811-QCAA 蓝牙5.1芯片资料解析
为了满足市场需求Nordic 宣布推出nRF52811系统级芯片(SoC),这个全功能无线连接解决方案支持蓝牙5.1 测向(Direction Finding)功能和一系列流行低功耗无线协议,用于智能 ...
- 字符串匹配之BF算法
1)算法原理 BF(Brute Force)算法是普通的模式匹配算法,BF算法的思想就是将目标串S的第一个字符与模式串P的第一个字符进行匹配,若相等,则继续比较S的第二个字符和P的第二个字符:若不相等 ...
- BZOJ 3876 [Ahoi2014&Jsoi2014]支线剧情
题解: 带下界的费用流 对于x->y边权为z Addedge(x,t,1,0) Addedge(s,y,1,z) Addedge(x,y,inf,0) 然后对每个点Addedge(i,1,inf ...
- 刷题48. Rotate Image
一.题目说明 题目是48. Rotate Image,简而言之就是矩阵顺时针旋转90度.不允许使用额外的矩阵. 经过观察(写一个矩阵,多看几遍就知道了),旋转90度后: 第1行变为len-1列(最后一 ...
- spring boot rest 接口集成 spring security(1) - 最简配置
Spring Boot 集成教程 Spring Boot 介绍 Spring Boot 开发环境搭建(Eclipse) Spring Boot Hello World (restful接口)例子 sp ...
- 初学C#之变量、占位符、转义符、还有就是类型转换
㈠.定义变量 先定义再赋值 int Num1; Num1 = ; 定义的同时赋值 ; 定义多个变量同时赋值,先决条件变量类型相同,例如: string phome = "1891250888 ...
- NRF24L01多对一、多通道通讯关键代码
要想24L01多通道通讯成功,务必先单通道调试成功,并且懂得这块芯片通讯的一些基本知识. 一.基本的通讯条件 1.接收端的接收地址(RX_ADDR_Px)等于发射端的发射送地址(TX_ADDR) ...
- 工程日记之HelloSlide(3):如何使用Core Data数据库,以及和sqlite之间的对应关系
Core Data 和 SQLite 是什么关系 core data是对sqlite的封装,因为sqlite是c语言的api,然而有人也需要obj-c的api,所以有了core data ,另外,co ...