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

  • 相关阅读:
    优雅解决Windows版Emacs的home路径的问题
    不容忽视的警告:默认库msvcrt.lib与其他库的使用冲突,请使用/NODEFAULTLIB:library
    搜狗浏览器也可以直接安装Chrome插件,太棒了
    给phpMyAdmin修改root密码后出现访问被拒绝的问题的解决办法
    给Eclipse替换镜像
    centos7 添加系统盘作为本地yum源
    python的学习内容
    列表
    Oracle-创建用户和表空间
    linux下oracle的启动和停止
  • 原文地址:https://www.cnblogs.com/zr123/p/8745905.html
Copyright © 2011-2022 走看看