【学习】jquery.placeholder.js让IE浏览器支持html5的placeholder

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>

posted @ 2016-07-21 16:35  后知后觉1206  阅读(6018)  评论(0编辑  收藏  举报