让浏览器兼容placeholder

html5为元素添加了新属性placeholder
这是一个很常用的功能:把提示放在输入框里;onfocus时提示消息;onblur时如果已有值,则不再提示,如果没值,保留提示。
QWrap的Valid组件里,提供了这个功能。不过Valid的功能太多,有使用成本。
这里,把跟placeholder的功能独立出来,可以无依赖的使用。
代码如下:


View Code
<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>

也可以在这个网址,查看演示效果:http://dev.qwrap.com/resource/js/wagang/valid/_examples/PlaceHolder-solo.htm

posted on 2011-02-23 17:33  JKisJK  阅读(9436)  评论(9编辑  收藏  举报

导航