placeholder属性是html5的新增属性,当输入框为空时, 可以提示一些信息, 非常不错的功能
-
placeholder支持情况: a) 已经支持: ie 9+ firefox 4.0+ chrome等 b) 需要模拟 : ie6 ie7 ie8 firefox3.6
-
placeholder a) 内容为空时, 内容显示为placeholder内容, 样式为color:#999 , 且垂直居中显示 b) 内容不为空, 无特殊变化, 原有placeholder样式, 需清除
-
模拟placeholder, 要求满足( 只考虑 input) a) 当页面显示后, 如果数据为空, 则显示为placeholder状态 b) 当点击input后, 清除placeholder,样式恢复文本样式 c) 当input离开焦点后, 根据内容来显示placeholder状态 d) 当placeholder状态时,刷新页面后, 也应该是placeholder状态 e) 当有js执行脚本后, 且变更input值后, 重置placeholder状态 f) 当表单reset后, 也需要重置placeholder状态 g) 当表单提交后, 当为placeholder状态时,提交的参数应该为空
-
注意点 a) firefox 3.6 ,需考虑 3.d)点, 需监停 window.onunload b) ie下, 第3.e)点,需监控 onpropertychange事件,比较复杂 c) firefox , 需监控 oninput 事件, 也比较复杂 d) form.reset事件, onreset是在修改input值前调用的, 也比较难重置状态
- 判断浏览器是否原生支持placeholder : “placeholder” in document.createElement(“input”)
- 简单实现, 可以监停focus/blur(focusin/focusout), submit/unload事件
- 本文发表在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>