placeholder 兼容 IE
placeholder 是 html5 的新属性，仅支持 html5 的浏览器才支持 placeholder，目前最新的 FF、Chrome、Safari、Opera 以及 IE10 都支持，IE6-IE9 都不支持！
placeholder 在各个浏览器下基本都是淡灰色显示，不同的地方在于 FF 和 Chrome 中，输入框获得焦点时，placeholder 文字没有变化，只有当输入框中输入了内容时，placeholder 文字才会消失；而在 Safari 和 IE10 下，当输入框获得焦点时，placeholder 文字便立即消失。
js 解决方法：
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("");
}
});
});
}
在页面里引入 jquery，再执行上面这段代码即可！
例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>placeholder兼容</title>
</head> <body>
<input type="text" placeholder="我是提示文字"> <!-- 这里 src 改成你自己的 jquery 路径 -->
<script type="text/javascript" src="../scripts/common/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
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('');
}
});
});
}
});
</script>
</body>
</html>
到此，placeholder 兼容问题已解决！
placeholder 兼容 IE的更多相关文章
- IE9以下 placeholder兼容
//input placeholder兼容!(function ($, doc, win) { $.fn.placeholder = function () { var i = doc.createE ...
- placeholder兼容
<!------------placeholder兼容-------------><script type="text/javascript"> $( ...
- placeholder兼容方法（兼容IE8以上浏览器）
//placeholder兼容方法(兼容IE8以上浏览器) var JPlaceHolder = { //检测 _check: function () { return 'placeholder' i ...
- IE8 placeholder兼容+Password兼容
对于placeholder兼容问题 IE系列的大部分不兼容 使用JQ插件解决这个问题,确实用法很简单 jS下载地址http://www.ijquery.cn/js/jquery.placeholder ...
- placeholder在不同浏览器下的表现及兼容方法 placeholder兼容
1.什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...
- ☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- input placeholder兼容ie10以下
代码如下: ,) < ) { $('input[placeholder]').each(function(){ var input = $(this); $(input).val(input.a ...
- input placeholder 兼容问题
placeholder是html5出的新特性,ie9以下是不兼容的, 那么为了兼容ie9 我们需要对他做处理 //jq的处理方式$(function(){ jQuery('[placeholder] ...
- ie9 placeholder兼容
.phcolor{ color:#999;}//css样式 function isPlaceholer(){ var input = document.createElement("inpu ...
随机推荐
- iOS设计模式解析（一）工厂方法
工厂方法:定义创建对象的借口,让子类决定实例化哪一个类.工厂方法是一个类的实例化延迟到了子类 例如 :Shoes厂有两个子类(Newbalance.Nike)构建类图如下: 代码实现: #i ...
- Spark Streaming 实现读取Kafka 生产数据
在kafka 目录下执行生产消息命令: ./kafka-console-producer --broker-list nodexx:9092 --topic 201609 在spark bin 目 ...
- Ubuntu 12.04 下安装git
---恢复内容开始--- 1.安装build-essential. 列出Git相关包(git-core 和 git-doc)所以来的各个安装包并安装: sudo apt-get build-dep g ...
- android 连接网络的简单实例
1.android有两种连接网络的类HttpURLConnect和HttpClient,但是HttpClient已逐渐被HttpURLConnect类代替所以就不提及. 2.实例 String add ...
- RSA—非对称加密算法
RSA:非对称加密算法加解密原理如下:已知:p,q,n,e,d,m,c其中:p与q互为大质数,n=p*q 公钥Pk(n,e):加密使用,是公开的 私钥Sk(n,d):解密使用,不公开 c:明文 m:密 ...
- IO-02
/** 2 *A2-IO-02. 整数四则运算(10) 3 *C语言实现 4 *测试已通过 5 */ #include "stdio.h" #include "stdli ...
- Linux06--Shell程序设计02 数据流重定向与管道
包含3种数据流: •标准输入(stdin):代码为0,符号为<或<<; •标准输出(stdout):代码为1,符号为>或>>; •标准错误输出(stderr):代码 ...
- eclipse 改包名
转载自: http://www.2cto.com/kf/201304/206747.html 1.在项目上右键,选择android tools->rename application packa ...
- Mac OS X：Dock 的附加功能
Dock 提供了可能并非显而易见的有用控件和菜单.通过修饰键的不同组合(如 Option 键.Control 键)及鼠标点按的不同类型(点按与按下及按住),即可使用下列附加功能.本文适用于 Mac O ...
- docker导入本地镜像
-rw-r--r-- 1 root root 98954220 Mar 17 17:02 centos-6-x86.tar.gz 利用下载的包 创建镜像: cat centos-6-x86.tar.g ...