让ie6到ie9完美兼容placeholder属性的jquery.yilingsj-placeholder.js插件

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2015-03-04 20:01:19　-　阅:　-　评:0　-　积分:0

昨天技术终于把公司网站的权限给我了，然后我就需要对网站中的css和页面代码进行大量的优化了，到目前为止还没有开工。我到底在忙什么呢？当然是制作插件了，目前插件已经制成，现来分享一下。

什么插件呢？这个得从公司说起了。由于公司页面是之前一位制作写的代码，插件都是网上找的并且功能并不是很好。现在是我接手这个岗位，平日里有需求时也要往页面中增删内容，因此，精简及优化是势在必行的。这个插件与输入框有关，也许你已经猜到了。是的，就是placeholder！

至于这个placeholder是干什么的呢，简单来说就是：文本占位符。也许你会想到一个更小常用的--value，的确如此。那么二者的区别又是什么呢？简单来说就是：前者兼容ie9+，默认不传值并且在文本框不为空时才自动清除；后者是默认传值文本框获取焦点时就清除。具体详细解释请自行网上资料吧。

于是某人搜索一翻，结果发现网上相关的插件也是很多。那么今天艺灵分享的这款与其它的有什么不同呢？答案肯定是有的。所谓：条条大路通罗马嘛。网上的答案无外乎两种。
方案一：传值给vlaue，即ie9-时通过jquery来将placeholder的值传递给value；
方案二：创建新标签，即ie9-时用jquery来创建标签，通过定位来覆盖到原文本框上面。而我是一个完美主义者，当然是尽可能的还原placeholder效果了。

在还原效果之前先来说下自己写这款也是第一款插件中学到的一个新知识点吧，那就是判断浏览器。

往常我们会使用jquery中的$.browser方法来检测浏览器或者是直接使用ie注释<--[if lte IE 6]><![endif]-->,这次，我们换种方法return 'placeholder' in document.createElement('input');这个就可以了。严格来说，这个是判断浏览是否支持placeholder属性的。网上有此类案例的应用，如检测浏览器是否支持css3中的属性。虽然我对此写法不是很懂，但通过对比后得出一个公式：return 'A' in document.createElement('B')，意思就是：检测浏览器中的B标签是否支持A属性，经测试是屡试不爽(嗞牙)。这里更正一下，后在群内小伙伴的帮助下找到了相关资料，原来这个是in 运算符

用这个方法判断浏览器，代码省了不少而且个人感觉比其它方法要更好。接下来就是该如何写代码了，说了这么多，大家连个图都没有看到。来放一张最后的效果图然后再放代码吧，如图：

这个是兼容ie6+的，密码框也是做了兼容性处理，文本框在有内容时提示文字才会以过渡的方式消失，效果跟placeholder一样，只是多了一个过渡而已(嗞牙)。下面我们来看看这款插件的源码吧。

jquery.yilingsj-placeholder.js

/* Name:jquery.yilingsj-placeholder.js
* compatible：ie6+
* Version:0.1
* Author:艺灵设计
* Date:2015-03-04
* describing:ie6到ie9中的文本/密码框均支持placeholder属性
* Email:315800015@qq.com
* Demo：http://www.yilingsj.com/d/file/jquery/2015-03-04/jquery.yilingsj-placeholder-demo.html
*/
/*
* //插件调用  (ps:圆角/阴影等css3属性请自行使用PIE.htc插件来兼容ie9-)
$.fn.placeholder({
placetext:"yilingsj-placeholdertext", //显示文本的class名
placelder:"yilingsj-placeholder",     //文本父级的class名
Event:"click",              	      //触发方式，保持默认即可。预留可选值：1.click:文本不为空清空默认内容；
changeTime:100,  					  //文本消失/隐藏时间，单位是:ms,1s=1000ms
makeCss:1,   				    	  //自动生成css的控制开关,可选值：[0,1]，0：不生成；1：生成。 主要考虑到使用插件的小盆友不一定会自己写css，特在此提供一个入口，选择1后页面中会自动生成css,小盆友可以拿生成的与自己的对比下哦^o^！  下面是调用插件时文本框的一些基本属性设置供修改，不会修改css的小盆友自行看手册解决，切勿填错属性，否则生成的css会有误
width:"410px",						  //输入框宽
height:"35px",						  //输入框高
borderWidth:"1px",					  //边框宽
borderStyle:"solid",				  //边框样式
borderColor:"#999",					  //边框颜色
borderRadius:"5px",					  //圆角
boxShadow:"1px 2px 3px #ccc",		  //阴影
activeBorder:"1px solid #E7BF5B",			  //输入框点击(获焦)时边框颜色
activeboxShadow:"1px 1px 3px #E7BF5B",	 //输入框点击(获焦)时阴影
fontFamily:"微软雅黑",				  //字体
fontSize:"12px",					  //字体大小
fontStyle:"normal",					  //字体样式
textIndent:"3px",  					  //文本缩进
color:"#999"				    	  //文本颜色
});
*/
;(function($){
$.fn.placeholder=function(options){/*扩展函数placeholder*/
var defaults={
placetext:"yilingsj-placeholdertext",/*显示文本的class名*/
placelder:"yilingsj-placeholder",    /*文本父级的class名*/
Event:"click",                 /*触发方式，保持默认即可。预留可选值：1.click:文本不为空清空默认内容；2.mouseover：获取焦点时清空默认内容 ;   待完善*/
changeTime:100,  				  /*文本消失/隐藏时间，单位是:ms,1s=1000ms*/
makeCss:1,   				      /*自动生成css开关,可选值：[0,1]，0：不生成；1：生成。 主要考虑到使用插件的小盆友不一定会自己写css，特在此提供一个入口，选择1后页面中会自动生成css,小盆友可以拿生成的与自己的对比下哦^o^！  下面是调用插件时文本框的一些基本属性设置供修改，不会修改css的小盆友自行看手册解决，切勿填错属性，否则生成的css会有误*/
width:"410px",					  /*输入框宽*/
height:"35px",					  /*输入框高*/
borderWidth:"1px",				  /*边框宽*/
borderStyle:"solid",			  /*边框样式*/
borderColor:"#999",				  /*边框颜色*/
borderRadius:"5px",				  /*圆角*/
boxShadow:"1px 2px 3px #ccc",	  /*阴影*/
activeBorder:"1px solid #E7BF5B",			  /*输入框点击(获焦)时边框颜色*/
activeboxShadow:"1px 1px 3px #E7BF5B",	 /*输入框点击(获焦)时阴影*/
fontFamily:"微软雅黑",			  /*字体*/
fontSize:"12px",				  /*字体大小*/
fontStyle:"normal",				  /*字体样式*/
textIndent:"3px",  				  /*文本缩进*/
color:"#999"				      /*文本颜色*/
};
var options=$.extend(defaults,options);/*传参并覆盖defaults*/
if(!placeholderSupport()){   // 低版本ie时调用
var $place=$('[placeholder]');
var placelder=options.placelder; /*创建一个span便于定位*/
var placetext=options.placetext; /*显示文本*/
var p_text='.'+placetext;
var p_place='.'+placelder;
var $placetext=$(p_text);
$place.wrap('<span class="'+placelder+'"></span>').after('<em class="'+placetext+'"></em>');
/*遍历span的内容为同辈的placeholder默认值*/
$place.each(function(){
$(this).siblings(p_text).css({"height":options.height,"line-height":options.height}).text($(this).attr("placeholder"));
});
/*鼠标放到span时input获取焦点*/
$(p_place).delegate(p_text,options.Event,function(){
$(this).siblings('input').focus().addClass('hover').end().parents(p_place).addClass('hover');
});
/*input操作*/
$place.keydown(function(){/*键盘被按下时span隐藏*/
$(this).siblings(p_text).fadeOut(options.changeTime);
}).blur(function(){       /*失焦时span显示*/
if($(this).val()==""){$(this).siblings(p_text).fadeIn(options.changeTime).end().removeClass('hover').end().parents(p_place).removeClass('hover');}
});
/*生成css调用判断*/
if(makeCss="1"){
/*自动生成css并以内部样式表的形式插入页面中，(ps:可提取出来复制到公用样式表中）*/
make_css();
};
};
/*自动生成css并以内部样式表的形式插入页面中，方便后面调用*/
function make_css(){
$('body').append('<!--jquery.yilingsj-placeholder.js自动生成css，可提取出来粘贴进公用样式表中--><style>'+p_place+"{position:relative;z-index:1;display:inline-block;border-radius:"+options.borderRadius+";box-shadow:"+options.boxShadow+";font-family:"+options.fontFamily+";font-size:"+options.fontSize+";font-style:"+options.fontStyle+";color:"+options.color+'}'+p_text+"{position:absolute;left:0;top:"+options.borderWidth+";z-index:99;display:inline-block;width:"+options.width+";height:"+options.height+";line-height:"+options.height+";font-family:"+options.fontFamily+";font-size:"+options.fontSize+";font-style:"+options.fontStyle+";text-indent:"+options.textIndent+";color:"+options.color+';cursor:text;background:url(about:blank);}'+p_place+" input{*float:left;/*兼容ie7-下的top?:1px;*/display:inline-block;margin:0;padding:0;width:"+options.width+";height:"+options.height+";line-height:"+options.height+";border-width:"+options.borderWidth+";border-color:"+options.borderColor+";border-style:"+options.borderStyle+";font-family:"+options.fontFamily+";font-size:"+options.fontSize+";font-style:"+options.fontStyle+";text-indent:"+options.textIndent+";color:"+options.color+';outline:0;}'+p_place+" input.hover{border:"+options.activeBorder+';-webkit-transition: .5s;transition: .5s;}'+p_place+".hover{box-shadow:"+options.activeboxShadow+';-webkit-transition: .5s;transition: .5s;}</style>');
};
/*定义函数*/
function placeholderSupport() {
return 'placeholder' in document.createElement('input');// 判断浏览器是否支持 placeholder
};
return this;
};
})(jQuery);

上面源码中带有注释，有兴趣的可以研究下。当然了，做为艺灵写的第一款插件，不足之处还是有的，也希望读者可以提出意见或者自己的思路等。下面再来说下如何调用吧，跟其它插件一样，调用还是比较简单的。

默认参数：

$.fn.placeholder();//duang~就是这么简单，duang~的一下就出来了

当然了，上面那个调用的是默认参数的效果，如果想修改参数也是可以的，毕竟总是有一些特殊需求的人嘛！代码如下。

修改参数：

$(function(){
　$.fn.placeholder({//调用插件
　placelder:"yilingsj-placeholder",     //文本父级的class名
　placetext:"yilingsj-placeholdertext",//显示文本的class名
　Event:"click",　　　　　//触发方式，保持默认即可。预留可选值：1.click:文本不为空清空默认内容；
　changeTime:100,  					  //文本消失/隐藏时间，单位是:ms,1s=1000ms
　makeCss:1,   				    	  //自动生成css的控制开关,可选值：[0,1]，0：不生成；1：生成。 主要考虑到使用插件的小盆友不一定会自己写css，特在此提供一个入口，选择1后页面中会自动生成内部css样式表,小盆友可以拿生成的与自己的对比下哦^o^！  下面是调用插件时文本框的一些基本属性设置供修改，不会修改css的小盆友自行看手册解决，切勿填错属性，否则生成的css会有误
　width:"410px",						  //输入框宽
　height:"35px",						  //输入框高
　borderWidth:"1px",					  //边框宽
　borderStyle:"solid",				  //边框样式
　borderColor:"#999",					  //边框颜色
　borderRadius:"5px",					  //圆角
　boxShadow:"1px 2px 3px #ccc",		  //阴影
　activeBorder:"1px solid #E7BF5B",			  //输入框点击(获焦)时边框颜色
　activeboxShadow:"1px 1px 3px #E7BF5B",	 //输入框点击(获焦)时阴影
　fontFamily:"微软雅黑",				  //字体
　fontSize:"12px",					  //字体大小
　fontStyle:"normal",					  //字体样式
　textIndent:"3px",  					  //文本缩进
　color:"#999"				    	  //文本颜色
　});
});

duang~怎么可以这么多！！！莫慌莫慌，先来仔细看看吧。你有什么发现？duang~竟然可以给小白自动生成css，真是太友好了！是的，当makeCss的值为1时就可以通过设置后面的参数来自动生成css，这个主要是给小白提供方便的。如果你写有自己的css，那这里就可以修改成0了。其实，最主要的是黄色高亮部分。这里才是关键，这里是jquery新建的样式名，注意修改时前面不要添加.如果要修改的话一定要保持你写的css和这个一致哦！

图也上了，代码也上了，可就是没有效果页面。莫急，这就上完整的源码。

jquery.yilingsj-placeholder-demo.html v:0.1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>让ie6到ie9完美兼容placeholder属性的jquery.yilingsj-placeholder.js插件--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="ie6兼容placeholder属性,跨浏览器兼容placeholder属性,jquery.yilingsj-placeholder.js插件">
<style type="text/css">
*{margin: 0;padding: 0;}
body{font-family:微软雅黑; font-size: 14px;}
ul,ol{list-style: none;}
.cf00{color: #f00;}
/*以上为页面简单重构,无需复制*/
/*简单登录演示框*/
.ylsj-loginw{width:500px ; margin: 100px auto;padding:10px;border:1px solid #ccc; border-radius:5px;box-shadow: 1px 2px 3px #ccc;}
.ylsj-loginw h1{font-size: 16px;margin:0 auto 10px;}
.ylsj-loginw ul li{margin-bottom: 10px;%;height:37px;line-height:37px;}
.ylsj-loginw ul li label{display:inline-block;width:50px;height:35px;line-height:35px;vertical-align:top;}
/*登录框内文本框默认样式*/
input[type="text"],input[type="password"]{width: 410px;height:35px;line-height:35px;border-radius:5px;margin:0;padding:0;border:1px solid #666;vertical-align:top;outline:0;color: #999;text-indent: 3px;}
input[type="text"]:focus,input[type="password"]:focus{border:1px solid #E7BF5B;-webkit-transition: .5s;transition: .5s;}
</style>
<!--引入jquery库-->
<script src="/skin/yilingsj/js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<!--引入jquery.yilingsj-placeholder.js插件  v:0.1-->
<script src="/d/file/jquery/2015-03-04/jquery.yilingsj-placeholder.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
/*插件调用*/
$('.ylsj-loginw input').placeholder({});
});
</script>
<div class="ylsj-loginw">
<h1>文本/密码框都支持placeholder的哦！duang~就连<span class="cf00">ie6</span>也妥妥滴！</h1>
<form action="" method="post">
<ul>
<li><label for="username">帐号：</label><input type="text" name="username" id="username" placeholder="duang~请输入您的帐号" /></li>
<li><label for="password">密码：</label><input type="password" name="password" id="password" placeholder="duang~请输入您的密码" /></li>
<li><label for="other">打杂：</label><input type="text" name="other" id="other" value="duang~我是打杂的，不设置placeholder的话duang~就不关我的事了" /></li>
</ul>
</form>
<!--jquery.yilingsj-placeholder.js 版本：0.1-->
<h2 style="text-align: right;font-size: 12px;padding-right: 8%;">Version:0.1</h2>
</div>
</body>
</html>

Demo/源码下载：

Demo演示页面jquery.yilingsj-placeholder.js插件　v:0.1 (内含案例源码)

好了，今天就到这里。明天该开始改版公司页面了。

2015.4.18号更新

后来在使用过程中发现上面的第一版不是多理想。如图：
input前有ico小图标
这种情况时需要添加小图标，那势必还是需要提前给input添加一个父级样式，这个样式内再添加一个小图标的标签。于是，我又对上面的代码进行了修改，第二版就出炉了。

刚才说过，要提前给input添加父级样式，也就是说在写页面html代码的时候就要添加好，所以我们需要先写出css样式。

css

/*简单登录演示框*/
.ylsj-loginw{width:500px ; margin: 100px auto;padding:10px;border:1px solid #ccc; border-radius:5px;box-shadow: 1px 2px 3px #ccc;}
.ylsj-loginw h1{font-size: 16px;margin:0 auto 10px;}
.ylsj-loginw ul li{margin-bottom: 10px;%;height:37px;line-height:37px;}
.ylsj-loginw ul li label{display:inline-block;width:50px;height:35px;line-height:35px;vertical-align:top;}
/*input默认样式设置*/
.yilingsj-placeholder{position:relative;z-index:1;display:inline-block;width:100%;border-radius:5px;box-shadow:1px 2px 3px #ccc;font-family:微软雅黑;font-size:12px;font-style:normal;color:#999}
.yilingsj-placeholder input,input[type="text"]{*float:left;/*兼容ie7-下的top?:1px;*/display:inline-block;margin:0;padding:0;width:100%;height:35px;line-height:35px;border:1px solid #999 ;font-size:12px;font-style:normal;text-indent:30px;color:#999;outline:0;font-family:微软雅黑;}
.yilingsj-placeholder input:focus,.yilingsj-placeholder input.on{border:1px solid #E7BF5B;-webkit-transition: .5s;transition: .5s;}
/*ico图标*/
.login_ico{position: absolute;left:10px;top:9px;background: url(/d/file/jquery/2015-03-04/login_ico.png) no-repeat;background-color: #ccc;display: inline-block;width:16px;height:19px;-webkit-transition: .5s;transition: .5s;}
.login_ico.name{background-position: -40px 0px;}
.login_ico.pass{background-position: -40px -19px;}
/*滑过触发ico图标变色*/
.yilingsj-placeholder input:focus ~ .login_ico,.yilingsj-placeholder.on .login_ico{background-color:#34a3eb;}
/*ie placeholder*/
.yilingsj-placeholder .placeholdertext{position:absolute;left:0;top:0;z-index:99;width:100%;color:#666;font-style:normal;font-size:12px;background:url(about:blank)\9;cursor:text; text-indent: 30px;}

然后我们在html中调用插件即可。

html

<div class="ylsj-loginw">
<h1>文本/密码框都支持placeholder的哦！duang~就连<span class="cf00">ie6</span>也妥妥滴！</h1>
<form action="" method="post">
<ul>
<li class="yilingsj-placeholder"><input type="text" id="top_login_name" name="userName" class="du_login_input" placeholder="手机/邮箱/用户名"><i class="login_ico name"></i></li>
<li class="yilingsj-placeholder"><input type="password" name="password" id="password" placeholder="duang~请输入您的密码" /><i class="login_ico pass"></i></li>
<li><input type="text" name="other" id="other" value="duang~我是打杂的，不设置placeholder和父级的话duang~就不关我的事了" /></li>
</ul>
</form>
<!--jquery.yilingsj-placeholder.0.2.js 版本：0.2-->
<h2 style="text-align: right;font-size: 12px;padding-right: 8%;">Version:0.2</h2>
<script type="text/javascript">
$(function(){
$('.yilingsj-placeholder').placeholder();
});
</script>
</div>

Demo/源码下载：

Demo演示页面jquery.yilingsj-placeholder.js插件　v:0.2 (内含案例源码)

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2015-03-04/250.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！