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

html5 input placeholder兼容

html5 阿豹 868次浏览 3个评论 扫描二维码

查看html5 input placeholder兼容性
实现html5 input placeholder兼容,需要借助javascript,css共同实现:
html代码:

 <input type="text" placeholder="邮箱" id="email-ks"/>

javascript代码:

(function(window){
	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();
	window.PlaceHolder = PlaceHolder;
})(window)

css代码:

//input预定义字体的样式
::-webkit-input-placeholder { /* WebKit browsers */
    color:#999;
    font-size:12px;
    text-indent: 5px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#999;
    font-size:12px;
    text-indent: 5px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#999;
    font-size:12px;
    text-indent: 5px;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:#999;
    font-size:12px;
    text-indent: 5px;
}
.placeholder{
    color:#999 !important;
    font-size:12px;
}

喜欢 (5)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到
(3)个小伙伴在吐槽
  1. 闲来无事,到此一游 乙未年(羊)九月初八 2015-10-20
  2. 签到成功!签到时间:2015-10-21 18:15:06,每日打卡,生活更精彩哦~
    匿名2015-10-21 18:15 回复
  3. 从百度点进来的,支持一下
    bateer2015-11-11 08:22 回复