请使用firefox,chrome等最新浏览器浏览本站。

HTML5 Placeholder 兼容

html5 阿豹 563次浏览 0个评论 扫描二维码

placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或输入内容)时,提示文字消失。
由于placeholder是html5的新属性,可想而知,仅支持html5的浏览器才支持placeholder,目前最新的firefox、chrome、safari以及ie10都支持,ie6到ie9都不支持
首先看一下实现改变placeholder背景色的代码:

/***input预定义字体的样式***/
::-webkit-input-placeholder {
	color: #999;
}
:-moz-placeholder {
	color: #999;
}
::-moz-placeholder {
	color: #999;
}
:-ms-input-placeholder {
	color: #999;
}
.placeholder{
	color: #999;
}

对于不支持Placeholder的浏览器我们要采用js处理:

var PlaceHolder = {
	_support: (function() {
		return 'placeholder' in document.createElement('input');
	})(),
	_class: "placeholder",
	init: function() {
		if (!PlaceHolder._support) {
			var inputs = document.getElementsByTagName('input');
			var _textarea = document.getElementsByTagName('textarea');
			PlaceHolder.create(inputs);
			PlaceHolder.create(_textarea);
		}
	},
	create: function(inputs) {
		if (!inputs.length) {
			inputs = [];
		}
		for (var i = 0, length = inputs.length; i < length; i++) {
			(function() {
				var input = inputs[i];
				if (!PlaceHolder._support && input.attributes && input.attributes.placeholder) {
					PlaceHolder._setValue(input);
					eventUtil.addHandler(input, "focus", function(e) {
						if (input.value === input.attributes.placeholder.nodeValue) {
							input.value = '';
							input.className = input.className.replace(PlaceHolder._class, " ");
						}
					});
					eventUtil.addHandler(input, "blur", function(e) {
						if (input.value === '') {
							PlaceHolder._setValue(input);
						}
					});
				}
			})()
		}
	},
	_setValue: function(input) {
		input.value = input.attributes.placeholder.nodeValue;
		input.className = this._class + " " + input.className;
	}
};
PlaceHolder.init();

转载请注明HTML5 Placeholder 兼容
喜欢 (2)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到