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 ...
随机推荐
- hive 函数学习
NAME PRICE ---- ----- AAA 1.59 AAA 2.00 AAA 0.75 BBB 3.48 BBB 2.19 BBB 0.99 BBB 2.50 I would like to ...
- MySQL常用命令及操作
1.登录与退出 1)登录 windows下直接在DOS命令窗口用root用户登录输入mysql回车; linux下输入使用PUTTY连接mysql的服务器,然后输入: ...
- javascript的调试
1. 关于javascript的调试,最好将浏览器的脚本通知打开. 2. 最好设置为每次访问页面时检查.
- sudo apt-get update
要用apt-get这种方式安装LAMP时,最好先运行下面在命令升级自己的系统这样是为了更新源,而如果你找的源不好,可能安装LMAP失败.#sudo apt-get update 获得最近的软件包的列表 ...
- JavaScript初学者应知的24条最佳实践（译）
原文:24 JavaScript Best Practices for Beginners 译者:youngsterxyf (注:阅读原文的时候没有注意发布日期,觉得不错就翻译了,翻译到JSON.pa ...
- 客户端持久化解决方案: Web SQL
客户端持久化解决方案: Web SQL Web SQL 提供了一组使用 SQL 操作客户端数据库的 APIs, 不是 HTML5 规范的一部分,是一个独立的规范. 核心方法 openDatabase: ...
- haproxy hdr_beg 配置
v-dev-app01:/root# ping www.zjdev.com PING www.zjdev.com (192.168.32.16) 56(84) bytes of data. 64 by ...
- CC++初学者编程教程(12) 基于rhel6.3的Oracle数据库学习环境搭建
前言 安装oracle 11g系统最好是1G以上内存,硬盘至少需要4.5G空间. 至少环境在Linux Server release 5.3以上. win安装包 win32_11gR2_databas ...
- 数值分析1：三角函数的计算（C语言实现）
之前学习C语言的时候,一直有个疑问,计算机从芯片设计的角度来看,只能计算常规的加减乘及移位之类的操作,那么对于像sin .cos这些三角函数,人脑尚无可以直接运算的法则,那么计算机是怎么实现的呢?最近 ...
- CentOS安装与配置LNMP
本文PDF文档下载:http://www.coderblog.cn/doc/Install_and_config_LNMP_under_CentOS.pdf 本文EPUB文档下载:http://www ...