众所周知。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. spring quartz 配置

    quartz简介 各种企业应用几乎都会碰到任务调度的需求,就拿论坛来说:每隔半个小时生成精华文章的RSS文件,每天凌晨统计论坛用户的积分排名,每隔30分钟执行锁定用户解锁任务.任务调度本身涉及到多线程 ...

  2. 1.5 （SQL学习笔记）事务处理

    一.事务 1.1事务概念 事务处理可以用来维护数据库系统数据的完整性,它保证一组SQL语句要么全部都执行, 要么全部都不执行.(例如一批SQL语句,只要有一个执行失败就全部不执行,即回到失败前的状态 ...

  3. 初识Ant-Design

    设计价值观 Ant-Design在设计方面,存在两个大的价值观,自然和确定.自然即顺其自然,在顺应用户的自我感知和行为方式来开发更自然的产品.确定即探索设计规律,并将其抽象成对象,减少设计者的主观干扰 ...

  4. 【redis】2.redis可视化工具安装使用

    redis可视化工具:Redis Desktop Manager 1.redis桌面管理工具[可视化工具]下载 下载地址:https://redisdesktop.com/download 2.点击安 ...

  5. Unity3D新手教学，让你十二小时，从入门到掌握！（二） [转]

    版权声明:本文为Aries原创文章,转载请标明出处.如有不足之处欢迎提出意见或建议,联系QQ531193915 继续上一讲的内容,首先呢, 为了接下来要做的小游戏,在这里我要小小的修改一下移动的代码. ...

  6. unity color space 选取

    https://unity3d.com/cn/learn/tutorials/topics/graphics/choosing-color-space https://docs.unity3d.com ...

  7. 在Oracle 11.2.0.1.0下dbms_stats.gather_table_stats收集直方图不准

    SQL> select * from v$version; BANNER ------------------------------------------------------------ ...

  8. Spring框架学习（7）spring mvc入门

    内容源自:spring mvc入门 一.spring mvc和spring的关系 spring mvc是spring框架提供的七层体系架构中的一个层,是spring框架的一部分,是spring用于处理 ...

  9. Leetcode--easy系列5

    #83 Remove Duplicates from Sorted List Given a sorted linked list, delete all duplicates such that e ...

  10. java线程总结（1/5）

    前言 闲来无事正值面试,看面试中有线程之问题,特此总结一番. 正文 一.线程和进程的区别:1.每个进程都有独立的代码和数据空间(进程上下文),进程间的切换会有较大的开销.2.线程可以看成时轻量级的进程 ...