input输入框预留文字,且实现星号密码输入方法placeholder=
2014年09月05日
技术资料
17645 views
input输入框预留文字,且实现星号密码输入方法placeholder=
html5为元素添加了新属性placeholder。
这是一个很常用的功能：把提示放在输入框里；onfocus时提示消息；onblur时如果已有值，则不再提示，如果没值，保留提示。QWrap的Valid组件里，提供了这个功能。不过Valid的功能太多，有使用成本。这里，把跟placeholder的功能独立出来，可以无依赖的使用。
其实很简单。贴上代码吧！
-
<input type="text" name="user" id="username" placeholder="请输入用户" />
-
<input type="password" name="pw" id="password" value="" placeholder="请输入密码"/>
-
<?php echo $ckcode; ?>
-
<input type="submit" name="submit" id="submit" value="登 录" data-theme="b" />
-
</form>
其他举列
-
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="613sky.com">
-
</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>
-
</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>
|
赞赏
贝壳iT,beikeit.com
