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. JS(移动端)自己封装移动端一些常用方法

    /** * Created by Administrator on 2016/7/14. */ /*命名空间*/ window.lcf = {}; /*监听过渡结束的方法*/ lcf.transiti ...

  2. Android布局（一）layout_gravity 属性和 gravity属性的区别

    安卓中的 layout_gravity 属性和 gravity属性 有啥区别? LinearLayout有两个非常相似的属性: android:gravity与android:layout_gravi ...

  3. mongodb高可用集群搭建

    集群构架图如下: 集群大致文件结构:(192.168.137.101节点) 先搭建3个副本集 rs1/mongod.conf rs1/start.sh rs2/mongod.conf 后面类似.... ...

  4. struts2源码调试环境的搭建

    源码之前,了无秘密. 说一句逼格很高的话来镇镇场子. 这两天在看陆舟的<Struts2技术内幕>,一边看脑子一边冒出四个字:相见恨晚.极力推荐想了解Struts2的人看看这本书,之前一直在 ...

  5. mysql学习（十）多表查询

    多表查询时,要给表名起别名,给字段名其别名(当两个表含有重复字段时) select p.name, c.name, pid from products p, cats c;//得到的结果为笛卡尔乘积 ...

  6. NodeJS学习笔记（一）——搭建开发框架Express，实现Web网站登录验证

    JS是脚本语言,脚本语言都需要一个解析器才能运行.对于写在HTML页面里的JS,浏览器充当了解析器的角色.而对于需要独立运行的JS,NodeJS就是一个解析器.每一种解析器都是一个运行环境,不但允许J ...

  7. SQLite header and source version mismatch 解决方案

    我下载了sqlite源码,并且configure, make, make install. 然后就出现SQLite header and source version mismatch  的错误. 上 ...

  8. Session和Cookie的关系

    Session和Cookie关系 两者构建了web的回话数据 Cookie作为客户端的回话,Session为服务器端的 共同点: 都是1对1的,(一个客户一个独立的回话) 都以键值对的方式存储数据 都 ...

  9. 5款免费Windows远程连接Linux桌面软件（VNC客户端）

        不论我们出于何种的用途目的,很多朋友有需要用到VNC链接Linux桌面环境,之前老左有分享过VNC Viewer绿色软件,昨天有朋友提出来使用之后登录远程桌面的界面.分辨率等有些色差.流畅程度 ...

  10. 本地/远程Service 和Activity 的交方式（转）

    android SDK提供了Service,用于类似*nix守护进程或者windows的服务. Service有两种类型: 本地服务(Local Service):用于应用程序内部 远程服务(Remo ...