在前端开发中，经常需要为input设置placeholder属性，但是placeholder是HTML5新属性，在IE10以下不兼容，那么如何完美兼容呢？

网上搜索了一下，其实也挺简单的，可以采用以下方法：

<script type="text/javascript">

    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>

　　这段代码很容易理解，但是用的时候发现对type=password类型不支持，于是继续搜索直到有了JPlaceHolder.js，感觉很不错，用起来也很简单

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Examples</title>

    <meta name="description" content="">

    <meta name="keywords" content="">

</head>

<body>

    <input type="password" placeholder="密码">

    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

    <script src="JPlaceHolder.js"></script>

</body>

</html>

　　下载地址：JPlaceHolder.js

IE如何兼容placeholder属性的更多相关文章

  1. html5的placeholder属性（IE如何兼容placeholder属性）

    界面UI推荐 jquery html5 实现placeholder兼容password  IE6 html5的placeholder属性(IE如何兼容placeholder属性) 2013-01-05 ...

  2. 【工作笔记五】html5的placeholder属性（IE如何兼容placeholder属性）

    placeholder属性,IE对其的支持表示无奈,firefox.google chrome表示毫无压力. HTML5对Web Form做了许多增强,比如input新增的type类型.Form Va ...

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

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

  4. placeholder属性兼容ie8

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

  5. 兼容placeholder

    众所周知.IE9以下不兼容placeholder属性,因此自己定义了一个jQuery插件placeHolder.js.以下为placeHolder.js的代码: /** * 该控件兼容IE9下面,专门 ...

  6. input 的 placeholder属性在IE8下的兼容处理

    placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...

  7. 改进《完美让IE兼容input placeholder属性的jquery实现》的不完美

    <完美让IE兼容input placeholder属性的jquery实现>中的代码在IE9以下浏览器中会出错,原因是因为ie9以下的浏览器对input的标签的解释不同. 例如对以下文本框的 ...

  8. HTML5表单提示placeholder属性兼容IE

    placeholder 属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. 注释:placeholder 属性适用于以下的 <inpu ...

  9. 兼容ie10以下版本的placeholder属性

    <script src="${ctx }/js/jquery.placeholder.js" type="text/javascript">< ...

随机推荐

  1. 有关IE的操作（收藏夹，清理缓存等）

    1.添加网页到收藏夹的函数: procedure AddURL(Folder, Url, Title: string); var MyUrlFile: TextFile; begin if Folde ...

  2. 十款基础级WordPress插件

    1.Akismet插件 Akismet是全球最受欢迎的反垃圾插件,专为对抗"博客spam"."评论spam"而生.Akismet是WordPress官方插件之一 ...

  3. linux 修改系统时间

    首先进入/proc/sys/xen,执行以下命令 [root@test]#cd   /proc/sys/xen[root@test]#echo 1 > independent_wallclock ...

  4. ruby on rails 实战（一）

    通过ruby on rails 一步一步搭建个人站点,涉及到的技术有:ruby,rails,javascript,jquery 操作系统:win7 IDE: rubymine 5.4. 第一步,下载安 ...

  5. 【C#】 装箱 (boxing) 和拆箱 (unboxing)

    目录: 1. 装箱和拆箱 2. 深入理解装箱和拆箱 3. int[] to object[],值类型数组到对象数组的转化 4. 使用泛型减少装箱和拆箱 1.  装箱和拆箱 装箱 就是把“值类型”转换成 ...

  6. JavaScrip拖动动画中的常见BUG

    经常我们在用JS辛苦写完一个拖动效果之后 ,发现有各种无法用JS解决的BUG.比如拖动时DOM元素中的内容会变蓝,鼠标的指示会变为一个小+号,或disable的样式,通常这种情况一发生,我们的拖动效果 ...

  7. LN : leetcode 292 Nim Game

    lc 292 Nim Game 292 Nim Game You are playing the following Nim Game with your friend: There is a hea ...

  8. SQLserver中idendity的妙用

    假设:现在有产品信息需要入库,要给每个产品按找预定的规则进行编号,编号规则如下: 产品编码:6位产品类型码+1位仓库码+2位年份+5位顺序码(要求从00001开始自增) 6位产品类型码:P00001 ...

  9. 6.24 AppCan移动开发者大会，我爱我家即将闪亮登场！

    6.24 AppCan移动开发者大会进入倒计时,报名通道即将关闭! “6月24日, 2016AppCan移动开发者大会即将召开,以“平台之上,应用无限”为主题,1500位行业精英汇聚在此,重磅新品发布 ...

  10. Android中使用WebView, WebChromeClient和WebViewClient加载网页

    在android应用中,有时要加载一个网页,如果能配上一个进度条就更好了,而android 中提供了其很好的支持, 其中webView的一系列用法,比如 webView.getSettings().s ...