学习jquery.placeholder.js让IE浏览器支持html5的placeholder
Posted web小白需努力
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学习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>
以上是关于学习jquery.placeholder.js让IE浏览器支持html5的placeholder的主要内容，如果未能解决你的问题，请参考以下文章
解决输入框placeholder属性不兼容IE9及以下浏览器问题