<!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. 深入探究jvm之GC的参数调优

    在上一篇博客记录了GC的算法及种类,这篇博客主要记录一下GC的参数如何调整以提高jvm的性能. 一.堆的回顾: 堆的内存空间总体分为新生代和老年代,老年代存放的老年对象,新构造的对象分配在eden区中 ...

  2. java算法 蓝桥杯 文化之旅

    问题描述 有一位使者要游历各国,他每到一个国家,都能学到一种文化,但他不愿意学习任何一种文化超过一次(即如果他学习了某种文化,则他就不能到达其他有这种文化的国家).不同的国家可能有相同的文化.不同文化 ...

  3. java tomcat报错: Starting Tomcat v7.0 Server at localhost' has encountered a problem问题

    运行web项目的时候出现下面错误: 出现这个问题的原因是 这个tomcat在其他项目中正在运行 关掉即可.

  4. 【HDU 6191】Query on A Tree 【可持久化字典树】

    题目 给出一棵有n个结点的树,树根是1,每个结点给出一个value.然后给出q个询问,每个询问给出两个整数u和x,你要在以u结点为根的子树中找出一个结点v,使得val[v] xor x最大, 并输出这 ...

  5. Python——字典与字典方法

    字典是一种通过名字或者关键字引用的得数据结构,其键可以是数字.字符串.元组,这种结构类型也称之为映射.字典类型是Python中唯一內建的映射类型,基本的操作包括如下: (1)len():返回字典中键— ...

  6. c++ 享元模式（flyweight）

    举个围棋的例子,围棋的棋盘共有361格,即可放361个棋子.现在要实现一个围棋程 序,该怎么办呢?首先要考虑的是棋子棋盘的实现,可以定义一个棋子的类,成员变量包括棋子的颜色.形状.位置等信息,另外再定 ...

  7. vim的vim-addons的问题

    最近急切想把vim变成IDE,这个过程的毕竟之路就是装插件,vim有自己的插件管理软件装起插件来相当方便,首先安装这个软件: sudo apt-get install vim-addon-manage ...

  8. opencv3.4 win10 visual studio2017 opencv_contrib 编译

    found Intel IPP (ICV version): 2017.0.3 [2017.0.3] at: D:/opencv/opencv_3_4_0/opencv/my_build/3rdpar ...

  9. zabbix主机自动注册

    一.主机自动注册的流程 zabbix agent指定server active主动自己的信息提供给zabbix_server,zabbix_server根据提供的信息自动添加主机,方便. 二. lin ...

  10. source insight 保存时删除多余空格，去除多余空格 space tab键

    source insight 保存时删除多余空格,去除多余空格 space tab键 摘自:https://blog.csdn.net/lanmanck/article/details/8638391 ...