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 ...
随机推荐
- .net程序员转战android第二篇---牛刀小试
上篇说道如何搭建android的开发环境,这一篇我们将牛刀小试一下, 完成我们第一个android APP应用. 我就从新建项目说起吧. 首先打开Eclipse,选择顶部的File(文件)——new( ...
- Linux自制离线源，利用百度网盘等下载离线资源
CentOS安装Axel: 目前yum源上没有Axel,我们可以到http://pkgs.repoforge.org/axel/下载rpm包安装. 32位CentOS执行下面命令: wget -c h ...
- ToString()的浅显解释（转）
转自:http://zhidao.baidu.com/link?url=2g3NZ8tmL635L5XmWUh5i-mAlAsySunJryiq2Jl0LRsM691049dOwhoXy-8kJ6HL ...
- Linux下 静态链接库 和 动态链接库
先来说说C/C++编译过程 编译: 检查语句符号定义,将C/C++代码翻译生成中间语言. 链接: 将中间代码整合,生成可执行的二进制代码. 简单的说,库文件都是一种特殊的中间语言文件,静态库还是一种特 ...
- yum php56
美国时间2014年11月13日,PHP开发团队,在「PHP 5.6.3 is available|PHP: Hypertext Preprocessor」上公布了PHP5.6系的最新版本「PHP 5. ...
- 启动程序的c++方法
#include <Windows.h> void main() { WinExec( "notepad.exe fitdata.txt", SW_SHOW ); // ...
- Android动画之硬件加速
你的动画写出来卡嘛?流畅嘛 如果你想提升动画的性能,那就是用它-hardware layers. During animations your views may be redrawn each fr ...
- Android Bitmaps缓存
Android 开发中,bitmap是引起内存泄漏的罪魁祸首,关于bitmap的加载,缓存策略,官方已经给了很详细的方法: 缓存之Memory Cache: 缓存的策略,是利用应用程序的分配的内存拿出 ...
- jquerymobile listview 局部刷新
function onSuccess(data, status) { data = $.trim(data); // alert(data); // return; if (data) { $('#l ...
- 5款免费Windows远程连接Linux桌面软件（VNC客户端）
不论我们出于何种的用途目的,很多朋友有需要用到VNC链接Linux桌面环境,之前老左有分享过VNC Viewer绿色软件,昨天有朋友提出来使用之后登录远程桌面的界面.分辨率等有些色差.流畅程度 ...