在前端开发中，经常需要为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. 点击后弧形展开的炫酷菜单--第三方开源-- CircularFloatingActionMenu（一）

    CircularFloatingActionMenu在github上项目主页地址:https://github.com/oguzbilgener/CircularFloatingActionMenu ...

  2. [.ashx檔？泛型处理例程？]基础入门#2....FileUpload上传前，预览图片（两种作法--ashx与JavaScript）

    原文出處  http://www.dotblogs.com.tw/mis2000lab/archive/2013/08/20/ashx_beginner_02_fileupload_picture_p ...

  3. python使用简单http协议来传送文件

    python使用简单http协议来传送文件!在ubuntu环境下,局域网内可以使用nc来传送文件,也可以使用基于Http协议的方式来下载文件我们可以使用python -m SimpleHTTPServ ...

  4. Requests:Python HTTP Module学习笔记（二）（转）

    在上一篇日志中对Requests做了一个整体的介绍,接来下再介绍一些高级的用法,主要资料还是翻译自官网的文档,如有错漏,欢迎指正. 参考资料:http://docs.python-requests.o ...

  5. DB2查询结果显示n行

    在SQLserver中语法是这样的:select top n * from staff ,即可查询显示n行数据 但是在DB2中语法是这样的,感觉比较接近英语. select * from STAFF ...

  6. linux内核设计与实现学习笔记-模块

    模块 1.概念:  如果让LINUX Kernel单独运行在一个保护区域,那么LINUX Kernel就成为了“单内核”.    LINUX Kernel是组件模式的,所谓组件模式是指:LINUX K ...

  7. MAC下安装与配置MySQL [转]

    一 下载MySQL 访问MySQL的官网http://www.mysql.com/downloads/ 然后在页面中会看到“MySQL Community Server”下方有一个“download” ...

  8. SQL Server 批量插入数据的两种方法

    在SQL Server 中插入一条数据使用Insert语句,但是如果想要批量插入一堆数据的话,循环使用Insert不仅效率低,而且会导致SQL一系统性能问题.下面介绍 SQL Server支持的两种批 ...

  9. iOS学习之基础控件

    一.UILabel      1.UILabel(标签):是显示文本的空间.在App中UILabel是出现频率最高的控件.      2.UILabel是UIView的子类,作为子类一般是为了扩充父类 ...

  10. 零基础学习Linux（一）环境搭建

    从本文开始我会为大家介绍一下linux环境下详细的集群环境安装.配置.部署到实例演示的整个过程.在此过程中会给大家详细介绍一下Linux的操作技巧和一些工具的使用.今天开始第一步——环境搭建. 第一步 ...