placeholder 是 html5 的新属性，仅支持 html5 的浏览器才支持 placeholder，目前最新的 FF、Chrome、Safari、Opera 以及 IE10 都支持，IE6-IE9 都不支持！

placeholder 在各个浏览器下基本都是淡灰色显示，不同的地方在于 FF 和 Chrome 中，输入框获得焦点时，placeholder 文字没有变化，只有当输入框中输入了内容时，placeholder 文字才会消失；而在 Safari 和 IE10 下，当输入框获得焦点时，placeholder 文字便立即消失。

js 解决方法：

if( !("placeholder" in document.createElement("input")) ){

    $("input[placeholder],textarea[placeholder]").each(function(){

        var that = $(this),

            text= that.attr("placeholder");

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

            that.val(text).addClass("placeholder");

        }

        that.focus(function(){

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

                that.val("").removeClass("placeholder");

            }

        })

        .blur(function(){

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

                that.val(text).addClass("placeholder");

            }

        })

        .closest("form").submit(function(){

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

                that.val("");

            }

        });

    });

}

在页面里引入 jquery，再执行上面这段代码即可！

例子：

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>placeholder兼容</title>

    </head>

    <body>

        <input type="text" placeholder="我是提示文字">

        <!-- 这里 src 改成你自己的 jquery 路径 -->

        <script type="text/javascript" src="../scripts/common/jquery-1.8.3.min.js"></script>

        <script type="text/javascript">

            $(function() {

                if( !('placeholder' in document.createElement('input')) ){   

                    $('input[placeholder],textarea[placeholder]').each(function(){

                          var that = $(this),

                              text= that.attr('placeholder');

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

                            that.val(text).addClass('placeholder');

                          }

                          that.focus(function(){

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

                                  that.val("").removeClass('placeholder');

                            }

                          })

                          .blur(function(){

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

                                  that.val(text).addClass('placeholder');

                            }

                          })

                          .closest('form').submit(function(){

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

                                  that.val('');

                            }

                          });

                    });

                  }

            });

        </script>

    </body>

</html>

到此，placeholder 兼容问题已解决！

placeholder 兼容 IE的更多相关文章

  1. IE9以下 placeholder兼容

    //input placeholder兼容!(function ($, doc, win) { $.fn.placeholder = function () { var i = doc.createE ...

  2. placeholder兼容

    <!------------placeholder兼容-------------><script type="text/javascript">    $( ...

  3. placeholder兼容方法（兼容IE8以上浏览器）

    //placeholder兼容方法(兼容IE8以上浏览器) var JPlaceHolder = { //检测 _check: function () { return 'placeholder' i ...

  4. IE8 placeholder兼容+Password兼容

    对于placeholder兼容问题 IE系列的大部分不兼容 使用JQ插件解决这个问题,确实用法很简单 jS下载地址http://www.ijquery.cn/js/jquery.placeholder ...

  5. placeholder在不同浏览器下的表现及兼容方法 placeholder兼容

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  6. ☆☆☆☆☆Placeholder兼容各大浏览器的例子☆☆☆☆☆

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. input placeholder兼容ie10以下

    代码如下: ,) < ) { $('input[placeholder]').each(function(){ var input = $(this); $(input).val(input.a ...

  8. input placeholder 兼容问题

    placeholder是html5出的新特性,ie9以下是不兼容的, 那么为了兼容ie9  我们需要对他做处理 //jq的处理方式$(function(){ jQuery('[placeholder] ...

  9. ie9 placeholder兼容

    .phcolor{ color:#999;}//css样式 function isPlaceholer(){ var input = document.createElement("inpu ...

随机推荐

  1. Oracle的分页查询语句优化

    Oracle的分页查询语句基本上可以按照本文给出的格式来进行套用. (一)   分页查询格式: SELECT * FROM  ( SELECT A.*, ROWNUM RN  FROM (SELECT ...

  2. python基础：映射和集合类型

    python字典的迭代器遍历 字典有一个方法可以返回该字典的迭代器,这个方法就是: dict. iteritems() 当在字典中增加或者删除字典entry的时候,迭代器会失效的,类似于C++的stl ...

  3. python中调用C++写的动态库

    一.环境:Windows XP + Python3.2 1. dll对应的源文件(m.cpp): #include <stdio.h> extern "C" { _de ...

  4. WinCmd

    Q1:tracert Tracert (跟踪路由)是路由跟踪实用程序,用于确定 IP 数据报访问目标所采取的路径. Tracert 命令用 IP 生存时间 (TTL) 字段和 ICMP 错误消息来确定 ...

  5. mongo设计（二）

    原文:http://blog.mongodb.org/post/87892923503/6-rules-of-thumb-for-mongodb-schema-design-part-2 By Wil ...

  6. leetcode 算法刷题(一)

    今天开始刷Leetcode上面的算法题.我会更新我刷题过程中提交的代码(成功和不成功的都有)和比较好的解法 第二题 Add Two Numbers 题目的意思:输入两个链表,这两个链表都是倒序的数字, ...

  7. mvc 跳转到另一个页面 Controller带参数

    跳转到链接    // Controller        public ActionResult Detail(int MessageId)        {             BLL.ZQS ...

  8. UML－状态图，顺序图，活动图

    一.编写用例文档      1.用例的内容:   用例编号   用例名  执行者  前置条件  后置条件  基本路径  扩展路径  字段列表  业务规则                         ...

  9. WPF(MultiTrigger)

    原文 http://blog.csdn.net/haifengzhilian/article/details/8822098 <Window x:Class="TestResource ...

  10. 960 grid 分析

    960 网格系统的构造如下:页面总宽度 960px12 栏布局, 每栏 60px每栏两边保留 10px 的外边距, 相当于 20px 的槽内容区域总宽度是 940px 960 布局无疑是非常好的网格系 ...