html5为元素添加了新属性placeholder。
这是一个很常用的功能：把提示放在输入框里；onfocus时提示消息；onblur时如果已有值，则不再提示，如果没值，保留提示。
QWrap的Valid组件里，提供了这个功能。不过Valid的功能太多，有使用成本。
这里，把跟placeholder的功能独立出来，可以无依赖的使用。
代码如下：
< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=GB2312" >
< title > 验证Valid ----placeholder </ title >
< meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" />
< style >
span.emptyhint { color : #999 ; position : absolute ; padding : 3px ; }
</ style >
</ head >
< body >
< div id =doc3 >
< div id ="bd" >
< div class ="section-ctn" >
< ul >
< li >
< label class ="k" > 订单主人： </ label >
< input type ="text" placeholder ="请填写订单主人" value ="JK" >
</ li >
< li >
< label class ="k" > 订单号： </ label >
< input type ="text" placeholder ="请填写订单号" >
</ li >
< li >
< label class ="k" > 备注： </ label >
< textarea type ="text" placeholder ="请填写备注" ></ textarea >
</ li >
</ ul >
</ div >
</ div >
< div id ="ft" >
部分内容来自 qwrap wagang组件Valid: ( < a href ="http://dev.qwrap.com/resource/js/wagang/_index.html" > http://dev.qwrap.com/resource/js/wagang/_index.html </ a > )
</ div >
< div id ="ft" >
QWrap网址： < a href ="http://www.qwrap.com" > www.qwrap.com </ a >
</ div >
</ div >
</ body >
< script >
function initPlaceHolders(){
if ( ' placeholder ' in document.createElement( ' input ' )){ // 如果浏览器原生支持placeholder
return ;
}
function target (e){
var e = e || window.event;
return e.target || e.srcElement;
};
function _getEmptyHintEl(el){
var hintEl = el.hintEl;
return hintEl && g(hintEl);
};
function blurFn(e){
var el = target(e);
if ( ! el || el.tagName != ' INPUT ' && el.tagName != ' TEXTAREA ' ) return ; // IE下，onfocusin会在div等元素触发
var emptyHintEl = el.__emptyHintEl;
if (emptyHintEl){
// clearTimeout(el.__placeholderTimer||0);
// el.__placeholderTimer=setTimeout(function(){//在360浏览器下，autocomplete会先blur再change
if (el.value) emptyHintEl.style.display = ' none ' ;
else emptyHintEl.style.display = '' ;
// },600);
}
};
function focusFn(e){
var el = target(e);
if ( ! el || el.tagName != ' INPUT ' && el.tagName != ' TEXTAREA ' ) return ; // IE下，onfocusin会在div等元素触发
var emptyHintEl = el.__emptyHintEl;
if (emptyHintEl){
// clearTimeout(el.__placeholderTimer||0);
emptyHintEl.style.display = ' none ' ;
}
};
if (document.addEventListener){ // ie
document.addEventListener( ' focus ' ,focusFn, true );
document.addEventListener( ' blur ' , blurFn, true );
}
else {
document.attachEvent( ' onfocusin ' ,focusFn);
document.attachEvent( ' onfocusout ' ,blurFn);
}
var elss = [document.getElementsByTagName( ' input ' ),document.getElementsByTagName( ' textarea ' )];
for ( var n = 0 ;n < 2 ;n ++ ){
var els = elss[n];
for ( var i = 0 ;i < els.length;i ++ ){
var el = els[i];
var placeholder = el.getAttribute( ' placeholder ' ),
emptyHintEl = el.__emptyHintEl;
if (placeholder && ! emptyHintEl){
emptyHintEl = document.createElement( ' span ' );
emptyHintEl.innerHTML = placeholder;
emptyHintEl.className = ' emptyhint ' ;
emptyHintEl.onclick = function (el){ return function (){ try {el.focus();} catch (ex){}}}(el);
if (el.value) emptyHintEl.style.display = ' none ' ;
el.parentNode.insertBefore(emptyHintEl,el);
el.__emptyHintEl = emptyHintEl;
}
}
}
}
initPlaceHolders();
</ script >
</ html >