众所周知。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. BUG:upstream timed out (10060: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected

    更换Apache扑向Nginx,刚搭建完WNMP,nginx能访问php页面 但是访问现有开发项目报错 [error] 4112#3724: *9 upstream timed out (10060: ...

  2. 既然有文件后缀名,为何还需要MIME类型?

    作者:Vincross链接:https://www.zhihu.com/question/60495696/answer/204530120来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商 ...

  3. [51nod1357]密码锁 暨 GDOI2018d1t2

    有一个密码锁,其有N位,每一位可以是一个0~9的数字,开启密码锁需要将锁上每一位数字转到解锁密码一致.这个类似你旅行用的行李箱上的密码锁,密码锁的每一位其实是一个圆形转盘,上面依次标了0,1,...9 ...

  4. 几本推荐的Java书

    一.<深入理解Java虚拟机:JVM高级特性与最佳实践> 如果你不满足于做一个只会写if…else…的Java程序员,而是希望更进一步,我随便举几个例子吧: 1.了解Java代码的底层运行 ...

  5. 【docker】解决docker pull镜像 拉取镜像龟速的问题,docker拉取镜像使用阿里云docker镜像加速器

    在docker拉取mysql镜像过程中,出现龟速的问题,解决这个问题的方法: 这个页面 停留了好久好久,依旧没有下载完成. 碰上这种情况 1.先退出Ctrl+C 2.在浏览器上进入阿里云docker库 ...

  6. iOS Web应用开发：运用HTML5、CSS3与JavaScript

    <iOS Web应用开发:运用HTML5.CSS3与JavaScript> 基本信息 原书名:Pro iOS web design and development:HTML5, CSS3, ...

  7. Cisco路由技术基础知识详解

    第一部分 请写出568A的线序(接触网络第一天就应该会的,只要你掐过,想都能想出来) .网卡MAC地址长度是(  )个二进制位(16进制与2进制的换算关系,只是换种方式问,不用你拿笔去算) A.12  ...

  8. MYSQL LIMIT 用法详解

    在mysql的limit用法中,网上有这样的论述: "//为了检索从某一个偏移量到记录集的结束所有的记录行,可以指定第二个参数为 -1: mysql>SELECT * FROM tab ...

  9. 流畅的python第十七章使用期物处理并发

    从 Python 3.4 起,标准库中有两个名为 Future 的类:concurrent.futures.Future 和asyncio.Future.这两个类的作用相同:两个 Future 类的实 ...

  10. 纯 PHP 代码最好在文件末尾删除 PHP 结束标记

    如果文件内容是纯 PHP 代码,最好在文件末尾删除 PHP 结束标记.这可以避免在 PHP 结束标记之后万一意外加入了空格或者换行符,会导致 PHP 开始输出这些空白,而脚本中此时并无输出的意图. & ...