博主信息
博文 4
粉丝 0
评论 0
访问量 3073
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
jQuery插件实现placeholder属性在IE9-下的使用以及在各大浏览器的显示效果一致
floristdragon
原创
1105人浏览过

      这篇博文主要介绍了基于jQuery解决placeholder的兼容性问题和显示效果表现不一致的问题,需要的friends可以借鉴一下。若博文中出现一些错误或不恰当的地方也欢迎大家指出。

       我们都知道placeholder属性是用来描述输入域所期待的值,是一种提示(hint),在做登录注册页面以及搜索框时给予提示对用户体验非常不错。然而它也是HTML5中<input>新增的属性之一。在不支持HTML5的非现代浏览器(如IE6~IE9)是不支持placeholder属性的,这就是我们要解决的问题之一,使用jQuery插件实现非现代浏览器对placeholder的使用。

        首先,下载jQuery插件:jquery.placeholder.js

        其次,在需要使用placeholder属性的页面,引入jq(jQuery的版本选择会在下一个问题进行讲解)和jquery.placeholder.js。注意引入时, 先引入jq,再引入该插件。           

    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>

    <script type="text/javascript" src="js/jquery.placeholder.js"></script>

        最后,在该页面或者js文件中写入如下脚本:

        $(function() {

             $(".sform input").placeholder();

        });

        如果要对placeholder属性里的值进行样式的设置,在该页面<style></style>或者css文件中使用以下方式进行设置:

        /*修改提示文字的字体大小颜色*/

        /*Webkit browsers*/

        .sform input::-webkit-input-placeholder {

            color: #999999;

            font-family: "Microsoft Yahei";

            font-size: 16px;

            /*text-indent: 2em;*/

        }

        

        /* Mozilla Firefox 4 to 18 */

        .sform input:-moz-placeholder {

            color: #999999;

            font-family: "Microsoft Yahei";

            font-size: 16px;

            /*text-indent: 2em;*/

        }


         /*Mozilla Firefox 19+*/

        .sform input::-moz-placeholder {

            color: #999999;

            font-family: "Microsoft Yahei";

            font-size: 16px;

            /*无效果*/

            /*text-indent: 2em;*/

        }

        

        /*Internet Explorer 10+*/

        .sform input:-ms-input-placeholder {

            color: #999999;

            font-family: "Microsoft Yahei";

            font-size: 16px;

            /*text-indent: 2em;*/

        }

    

        /*Internet Explorer 7 to 9*/

       .placeholder {

            color: #999999;

            font-family: "Microsoft Yahei";

            font-size: 16px;

            /*text-indent: 2em;*/

        }


        PS:在IE8-下输入框的光标不会垂直居中,需要通过设置line-height样式来实现

        解决完第一个问题,我们来看第二个问题。            

        placeholder支持HTML5的现代浏览器(IE10+、Chrome、FireFox、Opera、Safari)的显示效果是不一致的:在

IE10+/Safari 5.1.7里输入框获取焦点时提示文字消失,而在Firefox/Chrome/Safari下输入框获取焦点时提示文字不消失,

当键盘输入时提示文字才消失。

        第一步,我们要先判断浏览器的内核标识,可以使用jQuery里的方法$.browser来判断。而$.browser这个属性在jQuery 1.9已经被删除,所以引入jq时,要使用jQuery 1.9以下,jQuery 1.4以上的版本。

        例:如果当前使用的浏览器是 Microsoft 的 Internet Explorer,那么下面的语句会返回 true。

               $.browser.msie;

        第二步,.focus()事件和.blur()事件来解决在Firefox/Chrome/Safari下输入框获取焦点时提示文字不消失,当键盘输入时提示文字才消失的效果。

        //$.browser用来获取浏览器内核标识

        if ($.browser.webkit || $.browser.mozilla) {

            $(".sform input").focus(function(event) {

                $(this).attr("placeholder", "");

            });

            $(".sform input").blur(function(event) {

                if ($(this).val() == "") {

                    $(this).attr("placeholder", "五一特惠 免费安装");

                } else {

                    $(this).attr("placeholder", "");

                }

            });

        }



   

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学