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. 基于zepto的手机焦点图touchstart touchmove

    基于zepto的手机焦点图,查看地址:demo (建议使用手机浏览器查看)代码如下: <!DOCTYPE HTML> <html> <head> <title ...

  2. radio与checkbox

    最近一直在学习Javascript与asp.net MVC4,每天都在跟着书学习.这样总感觉自己看的很抽象,没有点实际的意义.而且,每次看的东西很容易忘记,所以打算在这里记录自己的学习笔记. Java ...

  3. hdu2368Alfredo's Pizza Restaurant

    Problem Description Traditionally after the Local Contest, judges and contestants go to their favour ...

  4. BZOJ 3648: 寝室管理( 点分治 + 树状数组 )

    1棵树的话, 点分治+你喜欢的数据结构(树状数组/线段树/平衡树)就可以秒掉, O(N log^2 N). 假如是环套树, 先去掉环上1条边, 然后O(N log^2 N)处理树(同上); 然后再O( ...

  5. Android 开源控件系列_2

    FileBrowserView 一个强大的文件选择控件.界面比较漂亮,使用也很简单.特点:可以自定义UI:支持复制.剪切.删除.移动文件:可以用在Fragment.ativity.DialogFrag ...

  6. DataGridview 填写数字

    private DataGridViewTextBoxEditingControl CellEdit = null; // 声明 一个 CellEdit        private void dgv ...

  7. php中__autoload()方法详解

    [导读] PHP在魔术函数__autoload()方法出现以前,如果你要在一个程序文件中实例化100个对象,那么你必须用include或者require包含进来100个类文件,或者你把这100个类定义 ...

  8. mysql 查询重复的(不区分大小写)数据的SQL优化

    在mysql中查询不区分大小写重复的数据,往往会用到子查询,并在子查询中使用upper函数来将条件转化为大写.如: select * from staticcatalogue WHERE UPPER( ...

  9. Python学习笔记（一）基础

    学习资料 跟着廖雪峰的Python教程学习Python,大家可以去官方网站查看学习教程.使用的Python版本为3.0.x,解释器为CPython.本系列博客为学习笔记,记录跟随廖老师所学知识,同时会 ...

  10. Database.SetInitializer的几种参数

    一:数据库不存在时重新创建数据库 Database.SetInitializer<testContext>(new CreateDatabaseIfNotExists<testCon ...