html5为元素添加了新属性placeholder。
这是一个很常用的功能:把提示放在输入框里;onfocus时提示消息;onblur时如果已有值,则不再提示,如果没值,保留提示。
QWrap的Valid组件里,提供了这个功能。不过Valid的功能太多,有使用成本。
这里,把跟placeholder的功能独立出来,可以无依赖的使用。
代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
< 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 >