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 ...
随机推荐
- Java中的日期表示类
一.概述 Java中的日期类设计的比较失败,刚开始使用Date来计算时间,后来大部分Date类的方法都过时了:想用Calendar类代替Date类,然而Calendar类也是不尽如人意.下面简单介绍下 ...
- JavaScript使浏览器不使用缓存
方法一: script标签中src链接,或者link标签的href链接,后面加上版本号: <script type='text/javascript' src='//site.com/js.js ...
- NSPredicate实现数据筛选
一:基本语法 1.什么是NSPredicate apple官方文档这样写的: The NSPredicate class is used to define logical conditions us ...
- Java算法练习——整数反转
题目链接 题目描述 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 备注 注意: 假设我们的环境只能存储得下 32 位的有符号整数,则其数值范围为 $[−2^{31}, 2^ ...
- 【PentestBox】rubygems.rb erorr
PentestBox可以在windows下运行一些Linux系统命令,但仍然基于windows. 若使用msfconsole或者gem命令是出现: internal:gem_prelude:1:in ...
- 【LeetCode 】N皇后II
[问题]n 皇后问题研究的是如何将 n 个皇后放置在 n×n 的棋盘上,并且使皇后彼此之间不能相互攻击. 上图为 8 皇后问题的一种解法.给定一个整数 n,返回 n 皇后不同的解决方案的数量. 示例: ...
- 生成私钥、公钥,配置到Git上
ssh-keygen -t rsa -C "1032671220@qq.com" 输入完毕指令,输入密码.然后会在 /z/.ssh/文件夹下生成一个私钥rsa_id.公钥rsa_p ...
- 201771010123汪慧和《面向对象程序设计Java》第十八周实验总结
一.总复习纲要 1. Java语言特点与开发环境配置(第1章.第2章) 2. Java基本程序结构(第3章) 3. Java面向对象程序结构(第4章.第5章.第6章) 4. 类.类间关系.类图 5. ...
- CCCC 连续因子
题意: 一个正整数N的因子中可能存在若干连续的数字.例如630可以分解为3*5*6*7,其中5.6.7就是3个连续的数字.给定任一正整数N,要求编写程序求出最长连续因子的个数,并输出最小的连续因子序列 ...
- POJ 2251:Dungeon Master
Dungeon Master Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 20687 Accepted: 8004 D ...