• 【学习】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{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>

  • 相关阅读:
    从零开始学习Sencha Touch MVC应用之六
    从零开始学习Sencha Touch MVC应用之七
    从零开始学习Sencha Touch MVC应用之四
    从零开始学习Sencha Touch MVC应用之四
    从零开始学习Sencha Touch MVC应用之七
    从零开始学习Sencha Touch MVC应用之五
    从零开始学习Sencha Touch MVC应用之三
    JpGraph
    thinkphp RBAC 详解
    PHPExcel常用方法总结
  • 原文地址:https://www.cnblogs.com/zr123/p/8745905.html
Copyright © 2020-2023  润新知