zoukankan      html  css  js  c++  java
  • 【学习】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{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>

  • 相关阅读:
    UOJ.26.[IOI2014]Game(交互 思路)
    Good Bye 2016 F.New Year and Finding Roots(交互)
    Codeforces.835E.The penguin's game(交互 按位统计 二分)
    Codeforces.744B.Hongcow's Game(交互 按位统计)
    Codeforces.862D.Mahmoud and Ehab and the binary string(交互 二分)
    正睿OI 提高 Day1T3 ZYB玩字符串(DP)
    划分vlan
    2三层交换机实现vlan间的路由
    交换机基础-交换机远程telnet
    自动化运维环境的搭建问题处理
  • 原文地址:https://www.cnblogs.com/xiaoxianweb/p/5692301.html
Copyright © 2011-2022 走看看