博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
兼容placeholder
阅读量:7078 次
发布时间:2019-06-28

本文共 1803 字,大约阅读时间需要 6 分钟。

众所周知。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('');  				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});		}	});}

调用方法:

			替换placeholder属性 兼容IE demo															
本代码兼容IE9下面,jQuery选择1.7.2的稳定版本号,代码实现考虑到一个页面有多个password输入框的情况。

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

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

转载地址:http://nxpml.baihongyu.com/

你可能感兴趣的文章
企业对于云存储的态度决定应用类型
查看>>
呼叫中心专业术语:基准测试
查看>>
惠普笔记本被政府盖章存隐藏键盘记录器,怎么回事?
查看>>
Angular 2拆分,分离了Dart代码库
查看>>
大讲台浅谈什么是Hadoop及如何学习Hadoop
查看>>
python commands.getoutput 不支持history命令的问题
查看>>
OA系统调研报告:技术推动OA发展
查看>>
使用MonoDevelop开发跨平台的应用程序
查看>>
ERP四大隐形成本,不看不知道!
查看>>
赵永红:光伏行业转型时期更需做好科普
查看>>
D1net阅闻:深港大数据联盟正式成立
查看>>
Juniper光网络大动作,收购Aurrion公司
查看>>
让IT运营适应新兴趋势的3个技巧
查看>>
政府部门推进智慧城市的意愿日趋强烈
查看>>
中间件市场现状到底如何?在云计算、大数据的时代将何去何从?
查看>>
天华阳光同美国PE公司扩大光伏领域战略合作
查看>>
BAT强势入侵SaaS市场,传统巨头的生存哲学
查看>>
如何破解政务大数据共享难题
查看>>
AMD下代APU核显或可达到HD 7850规格
查看>>
报告称中国黑客组织APT10发动全球规模最大的网络间谍活动
查看>>