众所周知。IE9以下不兼容placeholder属性，因此自己定义了一个jQuery插件placeHolder.js。以下为placeHolder.js的代码：

/**

 * 该控件兼容IE9下面，专门针对IE9下面不支持placeholder属性所做

 * Author: quranjie

 * Date：2014-09-26

 */

$(function() {

	// 假设不支持placeholder，用jQuery来完毕

	if(!isSupportPlaceholder()) {

		// 遍历全部input对象, 除了密码框

		$('input').not("input[type='password']").each(

			function() {

				var self = $(this);

				var val = self.attr("placeholder");

				input(self, val);

			}

		);

		/* 对password框的特殊处理

		 * 1.创建一个text框

		 * 2.获取焦点和失去焦点的时候切换

		 */

		$('input[type="password"]').each(

			function() {

				var pwdField    = $(this);

				var pwdVal      = pwdField.attr('placeholder');

				var pwdId       = pwdField.attr('id');

				// 重命名该input的id为原id后跟1

				pwdField.after('<input id="' + pwdId +'1" type="text" value='+pwdVal+' autocomplete="off" />');

				var pwdPlaceholder = $('#' + pwdId + '1');

				pwdPlaceholder.show();

				pwdField.hide();  

				pwdPlaceholder.focus(function(){

					pwdPlaceholder.hide();

					pwdField.show();

					pwdField.focus();

				});  

				pwdField.blur(function(){

					if(pwdField.val() == '') {

						pwdPlaceholder.show();

						pwdField.hide();

					}

				});

			}

		);

	}

});

// 推断浏览器是否支持placeholder属性

function isSupportPlaceholder() {

	var input = document.createElement('input');

	return 'placeholder' in input;

}

// jQuery替换placeholder的处理

function input(obj, val) {

	var $input = obj;

	var val = val;

	$input.attr({value:val});

	$input.focus(function() {

		if ($input.val() == val) {

			$(this).attr({value:""});

		}

	}).blur(function() {

		if ($input.val() == "") {

            $(this).attr({value:val});

		}

	});

}

调用方法：

<html>

	<head>

		<title>替换placeholder属性 兼容IE demo</title>

		<style type="text/css">

			input {

				height: 20px;

				width: 150px;

			}

		</style>

		<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>

		<script type="text/javascript" src="js/placeHolder.js" ></script>

		<script type="text/javascript">

			function check(){

				// 打印出password的值

				var passValue = $('#password').val();

				alert(passValue);

				return false;

			};

		</script>

	</head>

	<body>

		<form action="#">

			<input id="username" type="text" placeholder="请输入用户名" />

			<input id="password" type="password" placeholder="请输入密码" />

			<input id="confirm" type="password" placeholder="请确认密码" />

			<br /><br />

			<input type="submit" onclick="return check();"/>

		</form>

	</body>

</html>

本代码兼容IE9下面，jQuery选择1.7.2的稳定版本号，代码实现考虑到一个页面有多个password输入框的情况。

插播广告。本人想在工作之余做些兼职项目挣点外快。项目领域主要为：Android、IOS、PHP以及站点整站建设。当中尤其擅长Android、PHP和站点建设。

有意者请私信给我！非诚勿扰，谢谢！

兼容placeholder的更多相关文章

  1. 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

    placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...

  2. jQuery实现ie浏览器兼容placeholder效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  4. IE如何兼容placeholder属性

    在前端开发中,经常需要为input设置placeholder属性,但是placeholder是HTML5新属性,在IE10以下不兼容,那么如何完美兼容呢? 网上搜索了一下,其实也挺简单的,可以采用以下 ...

  5. IE8兼容placeholder的方案

    用JavaScript解决Placeholder的IE8兼容问题 placeholder属性是HTML5新添加的属性,当input或者textarea设置了该属性后,该值的内容将作为灰色提示显示在文本 ...

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

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

  7. 【JS】IE兼容placeholder

    直接上代码: $(document).ready(function () { var doc = document, textareas = doc.getElementsByTagName('tex ...

  8. ie上如何兼容placeholder

    首先,判断浏览器是否支持placeholder属性: var input = document.createElement('input'); if("placeholder" i ...

  9. ie兼容placeholder效果

    转载:http://www.jb51.net/article/56244.htm placeholder是HTML5<input>的属性之一,在不同的浏览器( 支持HTML5的现代浏览器 ...

随机推荐

  1. Generator函数（三）

    Generator.prototype.return() 1.Generator函数返回的遍历器对象还有一个return方法,可以返回给定的值,并终结Generator函数的遍历. function* ...

  2. 《深入理解Spark-核心思想与源码分析》（四）第四章存储体系

    天行健,君子以自强不息:地势坤,君子以厚德载物.——<易经> 本章导读 Spark的初始化阶段.任务提交阶段.执行阶段,始终离不开存储体系. Spark为了避免Hadoop读写磁盘的I/O ...

  3. iOS获取已安装的app列表（私有库）+ 通过包名打开应用

    1.获取已安装的app列表 - (void)touss { Class lsawsc = objc_getClass("LSApplicationWorkspace"); NSOb ...

  4. NFS迁移

    Auth: Jin Date: 20140317 需求将NFS共享IP切换为192.168.201.221,通过192.168.201.0网段提供共享(10.0.0.0和192.168.201.0都能 ...

  5. Word中向左缩进

    除了调节标线外(有时候不知道会不会改动其他),还可以shift+tab.

  6. Spring WebSocket入门(二) 转载

    本文转载自:http://www.jianshu.com/p/8500ad65eb50 WebSocket前端准备 前端我们需要用到两个js文件:sockjs.js和stomp.js SockJS:S ...

  7. [Linux] ubuntu 安装 Wireshark

    Wireshark是一款非常流行的协议分析软件.自然可以网络抓包的需求. sudo apt-get install wireshark 出于安全方面的考虑,普通用户不能够打开网卡设备进行抓包,wire ...

  8. [Java]利用javax.swing.Timer类在窗口上实现动画效果

    javax.swing.Timer类在创建时需要指定时间间隔和定时器到时间需要执行的动作,即ActionListener. Timer timer = new Timer(100, taskPerfo ...

  9. tez是什么？

    [Apache Tez是什么?] http://dongxicheng.org/mapreduce-nextgen/apache-tez/ 浅谈Apache Tez中的优化技术 http://dong ...

  10. 如何编写一个shellcode

    ShellCode的编写就是将函数或变量在内存中的间接地址改为函数或变量在内存中的直接地址,直接调用! 以MessageBox函数为例进行讲解如下 新建shellcode.cpp: 编写代码如下: 运 ...