<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery实现IE浏览器兼容placeholder效果</title>

    <style type="text/css">

    * {

        margin: 0;

        padding: 0;

    }

    .input {

        width: 200px;

        height: 30px;

        line-height: 30px;

        padding: 0 10px;

        border: 1px solid #ddd;

        margin: 20px auto;

        display: block;

    }

    </style>

</head>

<body>

    <input type="text" placeholder="请输入姓名" class="input" />

    <script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

    $(function() {

        //判断浏览器是否支持placeholder属性

        supportPlaceholder = 'placeholder' in document.createElement('input'),

            placeholder = function(input) {

                var text = input.attr('placeholder'),

                    defaultValue = input.defaultValue;

                if (!defaultValue) {

                    input.val(text).addClass("phcolor");

                }

                input.focus(function() {

                    if (input.val() == text) {

                        $(this).val("");

                    }

                });

                input.blur(function() {

                    if (input.val() == "") {

                        $(this).val(text).addClass("phcolor");

                    }

                });

                //输入的字符不为灰色

                input.keydown(function() {

                    $(this).removeClass("phcolor");

                });

            };

        //当浏览器不支持placeholder属性时，调用placeholder函数

        if (!supportPlaceholder) {

            $('input').each(function() {

                text = $(this).attr("placeholder");

                if ($(this).attr("type") == "text") {

                    placeholder($(this));

                }

            });

        }

    });

    </script>

</body>

</html>

效果图：

jQuery实现ie浏览器兼容placeholder效果的更多相关文章

  1. 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

    placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...

  2. 跨浏览器实现placeholder效果的jQuery插件

    曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性.几经周折,这个方案是可以解决问题的. 1.jsp页面引入js插件 <script type="text/java ...

  3. jQuery 两种方法实现IE10以下浏览器的placeholder效果

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 测试的浏览器:IE8,IETester下的IE6-IE9** Author:博客园小dee */ placeholder是H ...

  4. ie兼容placeholder效果

    转载:http://www.jb51.net/article/56244.htm placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 ...

  5. Jquery ajaxSubmit()的浏览器兼容问题

    form.ajaxSubmit({ 2 beforeSubmit: function() { 3 if (FinanceUtil.validate(form)) { 4 FinanceUtil.loa ...

  6. 低版本IE内核浏览器兼容placeholder属性解决办法

    最简便的一个方法,通过js实现. <input type="text" name="username" id="username" v ...

  7. 兼容IE浏览器的placeholder【超不错】

    jQuery EnPlaceholder plug (兼容IE浏览器的placeholder)使用 >>>>>>>>>>>>&g ...

  8. jQuery效果之封装模拟placeholder效果，让低版本浏览器也支持

    页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...

  9. IE下支持文本框和密码框placeholder效果的JQuery插件

    基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框.placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示 ...

随机推荐

  1. linux命令详解2-文件管理，查看文件命令

    1. cat命令(tac) ----连接文件,并打印出来(顺序打印)与tac命令类似只不过,tac命令是逆序打印 [语法] cat [OPTION]... [FILE]... [选项] -A:显示所有 ...

  2. Vertex Lit

    [Vertex Lit] Vertex Lit path generally renders each object in one pass, with lighting from all light ...

  3. JAVA中Colllection的基本功能

    Collection中的add方法: 代码: public static void main(String[] args) {        // TODO Auto-generated method ...

  4. js的事件冒泡和点击其他区域隐藏弹出层

    一.前言 在编写页面的时候,我们经常使用到弹出层.对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度.如果弹出层都没有较好的体验,那何谈通过交互来提升好感... 首先提出几个弹出层的注意点: ...

  5. git 忽略文件.gitignore

    # 此为注释– 将被Git 忽略 *.a # 忽略所有.a 结尾的文件 !lib.a # 但lib.a 除外 /TODO # 仅仅忽略项目根目录下的TODO 文件,不包括subdir/TODO bui ...

  6. Dell 1420N使用Kubuntu默认无线驱动后网络不稳定的解决方法

    前几天在我的Dell 1420N上安装了Kubuntu 13.04,装了系统软件中的私有无线网卡驱动Broadcom STA wireless driver后,虽然能上网,但是很不稳定,经常断线,非常 ...

  7. 修改字符集AL32UTF8修改为ZHS16GBK详解

    登陆sqlplus,在命令行输入 sqlplus sys/sys as sysdba;//登陆sqlplus SQL>SHUTDOWN IMMEDIATE; SQL>STARTUP MOU ...

  8. OpenSceneGraph3.4.0+Qt5.6.1MinGW开发环境部署

                基本步骤如下描述: Step1:CMake3.10编译openscenegraph3.4.0,生成makefile文件(中间过程可能会涉及到很多三方库,需要下载编译,然后按cm ...

  9. 基于weui的一个小插件

    移动端项目当中大量的使用了weui,为了减少工作量,方便修改,自己写了个小插件,暂时只有toast和dialog部分,可能会更新actionSheet等其他部分 更新一个手机端预览的二维码,就直接放项 ...

  10. [OS] 如何在远程机器上用ctrl+alt+del键修改登录用户的密码

    远程登录某台机器,想修改当前登录用户的密码,系统提示按Ctrl+Alt+Del,在出现的界面里修改密码 但我一按这三个键,是在我本地客户机生效,而不是在远程服务器. 答案 : 向远程桌面发送Ctrl+ ...