javascript模拟html5新增特性 - placeholder属性

placeholder属性是html5的新增属性,当输入框为空时, 可以提示一些信息, 非常不错的功能

1. placeholder支持情况:
     a) 已经支持: ie 9+  firefox 4.0+  chrome等
     b) 需要模拟 :  ie6 ie7 ie8 firefox3.6

2. placeholder
     a) 内容为空时, 内容显示为placeholder内容, 样式为color:#999 , 且垂直居中显示
     b) 内容不为空, 无特殊变化, 原有placeholder样式, 需清除

3. 模拟placeholder, 要求满足( 只考虑 input)
     a) 当页面显示后, 如果数据为空, 则显示为placeholder状态
     b) 当点击input后, 清除placeholder,样式恢复文本样式
     c) 当input离开焦点后, 根据内容来显示placeholder状态
     d) 当placeholder状态时,刷新页面后, 也应该是placeholder状态
     e) 当有js执行脚本后, 且变更input值后, 重置placeholder状态
     f) 当表单reset后, 也需要重置placeholder状态
     g) 当表单提交后, 当为placeholder状态时,提交的参数应该为空

4. 注意点
     a) firefox 3.6 ,需考虑 3.d)点, 需监停 window.onunload
     b) ie下, 第3.e)点,需监控 onpropertychange事件,比较复杂
     c) firefox , 需监控 oninput 事件, 也比较复杂
     d) form.reset事件, onreset是在修改input值前调用的, 也比较难重置状态

5. 判断浏览器是否原生支持placeholder :  "placeholder" in document.createElement("input")
6. 简单实现, 可以监停focus/blur(focusin/focusout), submit/unload事件
7. 本文发表在http://seavers.iteye.com/ 本文未经同意,谢绝转载

例:

KISSY 实现:

input.placeholder {color:#999}

<script src="http://a.tbcdn.cn/s/kissy/1.1.6/kissy-min.js"></script>
<script>
//本代码发布在 http://seavers.iteye.com/ , 未经同意,谢绝转载
//模拟了placeholder 80%的功能
(function() {
	var S=KISSY, Dom = S.DOM, Event = S.Event;

	S.namespace("HTML5");
	S.HTML5.placeholder = {
		support  : "placeholder" in document.createElement("input"), 
		activate : (function() {
			function _showPlaceholder(el, className, value) {
				if (!Dom.hasClass(el, className) && !el.value) {
					el.value = value;
					Dom.addClass(el, className);
				}
			}
			
			function _hidePlaceholder(el, className, value) {
				if (Dom.hasClass(el, className)) {
					el.value = value;
					Dom.removeClass(el, className);
				}
			}
			
			function _activatePlaceholder(selector) {
				var ATTR = "placeholder", CLASS = "placeholder";
				
				S.each(S.query(selector), function(el){
					var TIP = el.getAttribute(ATTR);
					if (!TIP) return ;
					
					Event.on(el.form, 'submit', function(ev) {
						_hidePlaceholder(el, CLASS, "");
					});
					Event.on(window, 'unload', function(ev) {	//解决firefox3.6刷新问题
						_hidePlaceholder(el, CLASS, "");
					});
					Event.on(el, 'focusin', function(ev){
						_hidePlaceholder(el, CLASS, "");
					});
					Event.on(el, 'focusout', function(ev){
						_showPlaceholder(el, CLASS, TIP);
					});
					_showPlaceholder(el, CLASS, TIP);
				});
			}
			
			return _activatePlaceholder;
		})()
	};
	
	//如果有原生的placeholder，使用原生，否则使用模拟的
	if (!S.HTML5.placeholder.support) {
		S.HTML5.placeholder.activate('INPUT');
	}
})();

</script>