深圳金猫标语
网站首页 > 建站百科 > 网站建设 > JQ html5 实现placeholder 兼容password ie6


JQ html5 实现placeholder 兼容password ie6

来源: 深圳网站设计   点击次数:  更新时间:2015-03-11
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>
                    <input type="password" id="password" placeholder="请填写密码" >
                </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>

placeholder属性的兼容性问题解决方法



更多

上一篇:网站建设的10大注意事项
下一篇:css 如何让图片全屏而不变形的问题

建站百科
最新上线网站
最新动态
官方微博
联系方式
电 话:13715363967
邮 箱:jm3q@jm3q.com
网 址:www.jm3q.com
地 址:深圳市龙华区龙华街道油松科技大厦B栋419

客户服务
售前咨询
QQ:376797323
网站备案
QQ:362226714
技术支持
QQ:2303230985
投诉建议
QQ:479277584
电话咨询
0755-83958156
周一至周五
9:00至18:00点
微客服
扫一扫
回到顶部