在前端开发中，经常需要为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. WIN10系统 Solidworks 2015 Toolbox插件提示 failed to create toolboxl ibrary object 解决方法

    网上大部分都是说卸载一个更新程序,但是在WIN10中根本没有. 但是也可通过以下方法解决: 1.关闭SW程序及进程,用管理员命令打开CMD 2.打开并复制SW目录,默认为 C:\Program Fil ...

  2. MySQL线上执行大事务或锁表操作

    前提 在线执行一些大事务或锁表操作(给某个核心级表加一列或者执行修改操作),此时不但主库从库要长时间锁表,主从延迟也会变大.未避免大事务sql对整个集群产生影响,,我们希望一条SQL语句只在Maste ...

  3. 第十九章 数据访问(In .net4.5) 之 处理数据

    1. 概述 本章介绍 数据库.Json和Xml.web services 三种介质上的数据操作. 2. 主要内容 2.1 数据库 ① 建立连接 .net平台中的数据连接类都继承自DbConnectio ...

  4. 史上最简单的个人移动APP开发入门--jQuery Mobile版跨平台APP开发

    书是人类进步的阶梯. ——高尔基 习大大要求新新人类要有中国梦,鼓励大学生们一毕业就创业.那最好的创业途径是什么呢?就是APP.<构建跨平台APP-jQuery Mobile移动应用实战> ...

  5. 深入理解Java String#intern() 内存模型

    原文出处: codelog.me 大家知道,Java中string.intern()方法调用会先去字符串常量池中查找相应的字符串,如果字符串不存在,就会在字符串常量池中创建该字符串然后再返回. 字符串 ...

  6. EMVTag系列11《电子现金发卡行授权码》

    按照银联个人化模板的建议,如卡片支持非接触快速支付应用(qPBOC),则推荐将电子现金授权码(9F74)作为qPBOC 应用AFL列表中的最后一条记录,且最后一条记录仅包含该数据元. 原因是:在某些情 ...

  7. Android动画解析--XML

    动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面 ...

  8. AFNetworking 2.0 使用

    AFNetworking 下载地址:https://github.com/AFNetworking/AFNetworking/ AFNetworking 2.0 当Deployment Target ...

  9. ios中怎么处理键盘挡住输入框

    //此前要遵循UITextFieldDelegate代理.并且设置该文本框为当前控制器的代理 //开始编辑的时候让整个view的高度网上移动 - (void)textFieldDidBeginEdit ...

  10. Ant学习---第五节：Ant_Junit介绍(基于3的版本)

    Junit3 和 Junit4 有本质上的区别 1.普通java类,代码如下: package learn.junit; public class HelloWorld { public String ...