让浏览器兼容placeholder

最新推荐文章于 2022-02-17 18:06:20 发布

morxiyee

最新推荐文章于 2022-02-17 18:06:20 发布

阅读量409

点赞数

分类专栏： WifiDog项目

WifiDog项目专栏收录该内容

16 篇文章 0 订阅

订阅专栏

转载地址:http://www.cnblogs.com/jkisjk/archive/2011/02/23/placdeholder_solo.html

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

morxiyee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
让浏览器兼容placeholder

html>head>metahttp-equiv="Content-Type" content="text/html; charset=GB2312">title>验证Valid ----placeholdertitle>metahttp-equiv="Content-Type" content="text/html; charset=gb2312"/>
复制链接

扫一扫