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 ...
随机推荐
- 5分钟搞懂:JWT(Json Web Token)
https://www.qikegu.com/easy-understanding/892 JWT 基于token的用户认证原理:让用户输入账号和密码,认证通过后获得一个token(令牌),在toke ...
- 使用SSH工具连接WSL
简单记录下操作过程 我在微软应用商店下载了Ubuntu 18.04 LTS.但是Windows的命令行太丑,我打算使用SSH工具连接WSL,输入密码一直拒绝连接... 查找资料之后解决了这个问题 双击 ...
- 不要对md5file.read()计算md5值
最近遇到的一个问题,我使用以下代码对备份文件计算MD5值: # md5file=open("%s" % outputpath, 'rb') # md5=hashlib.md5(md ...
- android:padding和android:margin的区别 android:gravity和 android:layout_gravity 区别
Android的Margin和Padding跟Html的是一样的.如下图所示:橙色边框(一个RelativeLayout或者LinearLayout)为例,最外层灰色为屏幕边框,黄色部分为Paddin ...
- MySQL日志--二进制日志
(一)什么是二进制日志 二进制日志(binlog)记录了数据库中所有的DDL和DML操作,但是不包括select语句,语句以"事件"的形式保存,记录了数据库的更改变化,在主从复制( ...
- window10 家庭版安装docker和php开发环境
前期工作 一.在宿主机创建文件夹 D:\wnmp\mysql57-conf D:\wnmp\mysql57-log D:\wnmp\nginx110-conf D:\wnmp\nginx110-l ...
- comparable and comparator 比较
转:http://www.yingjiesheng.com/job-002-393-132.html 一.前言 在Java集合框架里面,各种集合的操作很大程度上都离不开Comparable和Com ...
- 启动mysql遇到问题Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
在mysql的启动过程中有时会遇到下述错误 Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) 请问mys ...
- 1.softmax初探
1.softmax初探在机器学习尤其是深度学习中,softmax是个非常常用而且比较重要的函数,尤其在多分类的场景中使用广泛.他把一些输入映射为0-1之间的实数,并且归一化保证和为1,因此多分类的概率 ...
- SpringCloud学习之手把手教你用IDEA搭建入门项目(一)
SpringCloud简单搭建 jdk:1.8开发工具:IDEA注:需要了解springcloud 1.创建最简单的Maven项目 1)开始创建一个新的项目 2)创建一个空模板的maven项目,用 ...