众所周知。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 Security 可动态授权RBAC权限模块实践

    RBAC:基于角色的访问控制(Role-Based Access Control) 先在web.xml 中配置一个过滤器(必须在Struts的过滤器之前) <filter> <fil ...

  2. [转]Spring Security学习总结一

    [总结-含源码]Spring Security学习总结一(补命名空间配置) Posted on 2008-08-20 10:25 tangtb 阅读(43111) 评论(27)  编辑  收藏 所属分 ...

  3. GIT使用（自用）

    1.远程分支就是本地分支push到服务器上的时候产生的.比如master就是一个最典型的远程分支(默认). 1 $: git push origin master 除了master之外,我们还可以随便 ...

  4. python笔记10-多线程之线程同步（锁lock）

    前言 关于吃火锅的场景,小伙伴并不陌生,吃火锅的时候a同学往锅里下鱼丸,b同学同时去吃掉鱼丸,有可能会导致吃到生的鱼丸. 为了避免这种情况,在下鱼丸的过程中,先锁定操作,让吃火锅的小伙伴停一会,等鱼丸 ...

  5. Android 卡顿优化 2 渲染优化

    1.概述 2015年初google发布了Android性能优化典范,发了16个小视频供大家欣赏,当时我也将其下载,通过微信公众号给大家推送了百度云的下载地址(地址在文末,ps:欢迎大家订阅公众号),那 ...

  6. JS的jsoneditor，用来操作Json格式的界面；json-editor用来根据json数据生成界面

    1.jsoneditor https://github.com/josdejong/jsoneditor https://jsoneditoronline.org/ 效果如下: 2.json-edit ...

  7. iOS：触摸控件UITouch、事件类UIEvent

    UITouch:触摸控件类   UIEvent:事件类 ❤️❤️❤️UITouch的介绍❤️❤️❤️ 一.触摸状态类型枚举 typedef NS_ENUM(NSInteger, UITouchPhas ...

  8. Mount CIFS

    mount -t cifs -o username="共享用户",password="密码" //ip/sharing_folder /mountpoint [ ...

  9. 如何判断两个IP是否在同一网段

    下来举例说明,如何去判断A和B两个IP是否在同一网段. A IP:202.194.128.9 B IP:202.194.128.14 子网掩码:255.255.255.0 1.把A和B的地址转换为二进 ...

  10. [Python爬虫] 之十六：Selenium +phantomjs 利用 pyquery抓取一点咨询数据

    本篇主要是利用 pyquery来定位抓取数据,而不用xpath,通过和xpath比较,pyquery效率要高. 主要代码: # coding=utf-8 import os import re fro ...