众所周知。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. oracle数据库，mybatis批量insert，缺失values字段

    报错:### Error updating database.  Cause: java.sql.SQLException: ORA-00926: 缺失 VALUES 关键字### The error ...

  2. Wunder Fund Round 2016 (Div. 1 + Div. 2 combined) E. Robot Arm 线段树

    E. Robot Arm 题目连接: http://www.codeforces.com/contest/618/problem/E Description Roger is a robot. He ...

  3. UltraISO（软碟通）制作安装Ubuntu系统的U盘安装盘

    1.开UltraISO(软碟通),加载要写入U盘的iso文件,注意,要求软碟通的版本是9.3以上的.如下图: 2.点击“启动光盘.写入硬盘映像: 3.开启个写入硬盘映像的窗口,硬盘驱动器那一项看清楚是 ...

  4. Cronz表达式

  5. Postgres间隔大量写IO的解决办法

    概述 为了保证数据可靠性,同时还要保证好的读写性能,以及读写的一致性,经过多年的积累,REDO日志,shared buffer等基本成为关系型数据库的标配.postgres也不例外. 为了保证数据的可 ...

  6. iOS：网页视图控件UIWebView的详解

    网页视图控件:UIWebView 功能:它是继承于UIView的,是一个内置的浏览器控件,以用来浏览从网络下载下来的网页或者本地上加载下来的文档. 枚举: //网页视图导航类型 typedef NS_ ...

  7. all-oone-data-structure（好）

    哈哈,我用了HashMap, 双向链表,还有了HashSet来保存key的集合. 现在这道题目还只有 9.3%的AC率,难度为HardTotal Accepted: 9 Total Submissio ...

  8. shell学习:几道常见shell习题

    1. 编写shell脚本,计算1-100的和: #! /bin/bash sum=0 for i in `seq 1 100`; do sum=$[$i+$sum] done echo $sum 计算 ...

  9. Shell学习:read的选项及用法

    转摘: http://kb.cnblogs.com/a/2255702/ 1. Read的一些选项 Read可以带有-a, -d, -e, -n, -p, -r, -t, 和 -s八个选项. -a : ...

  10. 心路历程——毕设程序mr跑不通的问题

    这个bug改了实在是太多天了,前前后后折腾了太久,最后多谢@CC学长的帮助,找到了问题,才终于跑通了!!!这里记录一下这个bug我前后改的过程,引以为戒! 毕设中需要进行mapreduce进行数据清洗 ...