【学习】jquery.placeholder.js让IE浏览器支持html5的placeholder
原文链接:https://www.cnblogs.com/xiaoxianweb/p/5692301.html
type为text或password的input,其在实际应用时,往往有一个占位符,类似这样的:
在没有html5前,一般写成value,用js实现交互,文本框获得焦点时,提示文字消失,失去焦点时,文字又出现,这样体验很好,而且也不用在文本框前面放上功能字样的文字了,节省空间。贴一段jquery代码好了:
$(":input").focus(function(){//默认文字消失
if($(this).val()==this.defaultValue){
$(this).val("");
}
}).blur(function(){//默认文字出现
if($(this).val()==""){
$(this).val(this.defaultValue);
}
});
而在html5中,input文本框或textarea文本域有了自己的占位符属性,placeholder,替代了value,也不用写js了,其本身就具备了用户输入内容时,提示文字消失的功能。
我的偶象大神张鑫旭很早就写过一篇文章,详细阐述其特性,原文地址:http://www.zhangxinxu.com/wordpress/?p=2169
但是呀,令人头疼的IE,
看看这一片绿海中的几点红,ie简直就是大魔王,而且呢,ie8不兼容就算了,ie9也不兼容,这怎么能放心的使用呢,使用了也会被领导检出bug的。
还是用回value吧,但是,这么好的属性不用就是不甘心呢,太太可惜了吧。没关系,有问题找度娘啊,搜搜搜,让placeholder能兼容ie的搜索结果不要太多哦。
最后,找到一个最完美的解决办法,而且兼容password。使用了插件jquery-placeholder.js
用法简单,只要引入jquery库文件和插件文件,并添加一行代码调用即可,具体如下:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-placeholder.js"></script>
<script>jQuery(function($){$.placeholder.ini();})</script>
<style>input{width:500px}</style>
</head>
<body>
<div>
<div>
<span>username:</span>
<span>
<input type="text" placeholder="Put your name here, max length is 16 letters" maxlength="16" />
</span>
</div>
<div>
<span>password:</span>
<span>
<input type="password" placeholder="Your password here" />
</span>
</div>
</div>
</body>
</html>