兼容placeholder

Posted claireyuancy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了兼容placeholder相关的知识,希望对你有一定的参考价值。

众所周知。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输入框的情况。


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

有意者请私信给我!非诚勿扰,谢谢!

以上是关于兼容placeholder的主要内容,如果未能解决你的问题,请参考以下文章

placeholder兼容性问题

ie下不支持placeholder 用jquery来完成兼容

placeholder不兼容 IE10 以下版本的解决方法

RuntimeError: tf.placeholder() 与急切执行不兼容

input placeholder兼容ie10以下

placeholder插件兼容ie6.7.8,(支持密码框)