基于jQuery实现IE浏览器兼容占位符效果的两种方法

占位符是HTML5input的属性之一，在不同浏览器(支持HTML5的现代浏览器)中显示效果略有不同：

在Chrome(v31.0.1650.63 m)、Firefox(v21.0)和360 security (v6.3极速模式)中，输入字段获得焦点后提示文本不会消失，如图(Chrome):

在获得焦点之前：

当你集中注意力时：

碰巧IE11应该做些特别的东西：

在获得焦点之前：

当你集中注意力时：

也就是说，当你获得焦点时，提示文本就会消失。

非现代浏览器(如IE6-IE9)不支持占位符属性。现在，jQuery用来让这些非现代浏览器也实现占位符的显示效果。第一种方法实现IE11效果，即输入框获得焦点时提示文本消失；如果你想得到一个类似chrome的效果，也就是当输入框获得焦点时提示文本不会消失，你可以使用第二种方法。

方法一

效果预览：

http://jsfiddle.net/L57b25yr/embedded/result/

其思路是，首先判断浏览器是否支持占位符属性，如果不支持，遍历所有输入输入框，获取占位符属性的值并填入输入框作为提示信息，字体设置为灰色。

当输入框获得焦点，并且输入框中的文本等于设置的提示信息时，清空输入框；

当输入框失焦(模糊)且输入框中的文本为空时，将获取的占位符属性值作为提示信息填入输入框，并将字体设置为灰色；

当输入框出现按键时，输入框中的提示信息已经被焦点事件清除，只需要再次将字体还原为黑色即可。

这种方法的缺点是不适合加载DOM时获得焦点的输入框，因为从用户的角度来看，加载页面时获得焦点的输入框的提示文本是不可见的。

HTML:

输入类型=' text' id=' uname' name=' uname '占位符='请输入用户名'/CSS:phcolor { color: # 999}JS:

$(function(){ //确定浏览器是否支持document.createelement ('input ')中的占位符属性support placeholder=' placeholder ')。占位符=函数(输入){ var text=input.attr('占位符')，default value=input . default value；if(！defaultValue){ input.val(文本)。addCLaSS(' ph color ')；} input . focus(function(){ if(input . val()==text){ $(this))。val(“”)；} });input . blur(function(){ if(input . val()=' '){ $(this))。val(文本)。addCLaSS(' ph color ')；} });//输入字符不是灰色输入。keydown(函数(){$ (this))。remove class(' ph color ')；});};//当浏览器不支持占位符属性时，调用占位符函数if(！supportPlaceholder){ $('input ')。每个(函数(){ text=$(this))。attr('占位符')；if($(this)。attr(' type ')==' text '){ placeholder($(this))；} });}});经过测试，可以达到IE11placeholder的显示效果。

方法2

这种方法的思路是制作一张带有提示文字的图片作为输入输入框的背景图片，同时初步获取焦点并加载背景图片；

背景图片如下：

当输入框不为空时，移除背景图像；

输入框为空时，加载背景图片；

当用户按键盘上的键，输入框不为空(输入字符)时，去掉背景图片；

当用户按下键盘上的一个键并且输入框为空(删除字符)时，背景图像被加载。

这种方法的缺点是需要为每一个不同提示文本的输入制作一个背景图片，并设置输入的样式。

HTML代码保持不变。

CSS:phbg { background : URL(img/BG . jpg)0 0不重复；}JS:

$(function(){ //确定浏览器是否支持文档中的占位符属性support placeholder=' placeholder '。create element(' input ')；if(！SupportPlaceholder){ //添加背景图片$('#uname ')。初始状态下的attr('class '，' phbg ')；//初始状态获取焦点$('#uname ')。聚焦；函数destyle(){ if($('#uname ')。val()！=''){ $('#uname ')。remove CLaSS(' phbg ')；}else{ $('#uname ')。attr('class '，' phbg ')；} }//输入框为空时，添加背景图片；有值时删除背景图片destyle()；$ ('# uname ')。keyup(function(){//当输入框有按键输入且输入框不为空时，去掉背景图片；有按键输入且为空(删除字符)时添加背景图片destyle()；});$ ('# uname ')。keydown (function () {//keydown事件可以移除背景图片$('#uname ')。第一次按键时的remove class(' phbg ')；});}});方法到此结束。

该方法显示了IE8下的效果：

当你集中注意力时：

失去焦点时：

带输入：

如果朋友有更好的方法，欢迎交流讨论。