在前端开发中，经常需要为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. 【转】Doscommand-操作Cmd的第三方控件

    核心用法: Doscommand1.CommandLine := 'cmd /c' +[命令];Doscommand1.OutputLines :=Memo1.Lines;Doscommand1.Ex ...

  2. java中的接口回调

    [接口回调]接口回调是多态的另一种体现.接口回调是指:可以把使用某一个接口的类创建的对象的引用赋给该接口声明的接口变量中,那么该接口变量就可以调用被类实现的接口中的方法.当接口变量调用被类实现的接口中 ...

  3. 生产库MySQL配置文件my.cnf详解

    OS:CentOS6.3 DB:5.6.16 [client] #客户端port = 3306 #数据库端口3306socket = /my/log/mysql.sock #MySQL套接字,多实例下 ...

  4. outlook配置

    有时打开outlook报错.步骤如下: 一.打开控制面板-邮件-电子邮件账户-新建 二.具体设置如下: 三.点第二步上的“其他设置(M)”.做发送服务器.

  5. 最简单的耗时组件(窗口activity里面放一个progressBar)

    ①.先定义一个activity package com.example.administrator.actionbardemo; import android.app.Activity; import ...

  6. SQL开发技巧(二) 【转】感觉他写的很好

    本文转自: http://www.cnblogs.com/marvin/p/DevelopSQLSkill_2.html 本系列文章旨在收集在开发过程中遇到的一些常用的SQL语句,然后整理归档,本系列 ...

  7. Mac下显示\隐藏所有文件

    显示Mac隐藏文件的命令:defaults write com.apple.finder AppleShowAllFiles -bool true隐藏Mac隐藏文件的命令:defaults write ...

  8. 28335 sci fifo send

    #include "DSP2833x_Device.h"#include "DSP2833x_Examples.h"char buf[]={0x30,0x32, ...

  9. 2.2孙鑫C++

    1.继承 动物有 吃 睡 呼吸的方法 当然 鱼也有    不用重复再定义 1)public 那里都可以访问 #include <iostream.h> class Animal //类 基 ...

  10. JAVA类与对象（五）----对象的生成、使用

    对象的生成 创建一个对象包括对象的声明.实例化.初始化三部分. 1.声明-----类名对象名 声明并不是为对象分配内存空间,而只是分配一个引用空间.对象的引用类似于指针,是32位的地址空间,它的值指向 ...