首页 > 代码库 > 兼容placeholder

兼容placeholder

2024-07-24 21:56:45   229人阅读

众所周知，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=http://www.mamicode.com/'+pwdVal+' autocomplete="off" />');  >
调用方法：
<html>
	<head>
		<title>替换placeholder属性 兼容IE demo</title>
		<style type="text/css">
			input {
				height: 20px;
				width: 150px;
			}
		</style>
		<script type="text/javascript" src=http://www.mamicode.com/"js/jquery-1.7.2.min.js" ></script>>本代码兼容IE9以下，jQuery选择1.7.2的稳定版本，代码实现考虑到一个页面有多个password输入框的情况。

插播广告，本人想在工作之余做些兼职项目挣点外快，项目领域主要为：Android、IOS、PHP以及网站整站建设，其中尤其擅长Android、PHP和网站建设。
有意者请私信给我！非诚勿扰，谢谢！

兼容placeholder


联系
我们