0
点赞
收藏
分享

微信扫一扫

js:页面多处输入只使用一个验证码/获得焦点显示/onblur隐藏实现

/*
 * 全页共用验证码 CHRD.verify({id:'id', blurFunc, focusFunc, clickFunc, src}),0参数换码,没参数隐藏
 */
CHRD.verify = function(obj) {    
    var img = CHRD.getObj('publicVerifyImg');
    var change = function() {//刷新图片
            this.lastChild.src = this.lastChild.src.replace(/&[^&]+$/, '&t=' + Math.random());
    }
        
    if (obj == 0) {
        change.call(img);
        return;
    }
    
    if (!obj) {
        return img && (img.style.display = 'none');
    }
    
    if (!img) {
        img = document.createElement('a');
        img.style.position = 'absolute';
        img.style.zIndex = '99999';
        img.href="javascript:void(0);";
        img.style.textAlign = 'center';
        img.target = "_self";
        img.title = "点击这里换一个新的验证码";
        img.style.display = 'none';
        img.className = 'publicVerifyImg';
        img.id = 'publicVerifyImg';
        img.innerHTML = '<b>换?点下![不分大小写]<br/></b>'     
                        +'<img src="' + obj.src + '&t=' + Math.random() + '" height=100 />'
        img = document.body.appendChild(img);
        img.onclick = function () {
            clearTimeout(CHRD.verify.timer);
            change.call(this);
        }
        img.onblur = function() {            
            clearTimeout(CHRD.verify.timer);
            CHRD.verify.timer = setTimeout(function(){CHRD.verify()}, 200);
        }
    }
    
    var showFunc =  function() {
        clearTimeout(CHRD.verify.timer);//防止其它的动作引发隐藏
        var idXY = CHRD.getPos(obj.id);
        
        switch(obj.show) {
            case 'd'://正下方
                img.style.top = CHRD.getObj(obj.id).offsetHeight + idXY.y + 'px';
                img.style.left = idXY.x + 'px';
                break;
            case 'dr'://右下方
                img.style.top = CHRD.getObj(obj.id).offsetHeight + idXY.y + 'px';
                img.style.left = (idXY.x + CHRD.getObj(obj.id).offsetWidth + 20) + 'px';
                break;
            default://右下方
                img.style.top = CHRD.getObj(obj.id).offsetHeight + idXY.y + 'px';
                img.style.left = (idXY.x + CHRD.getObj(obj.id).offsetWidth + 20) + 'px';
        }
        
        img.style.display = 'inline';
    }
    CHRD.getObj(obj.id).onclick = function () {
        showFunc();
        obj.clickFunc && obj.clickFunc.call(this);
    }
    CHRD.getObj(obj.id).onfocus = function () {
        showFunc();
        obj.focusFunc && obj.focusFunc.call(this);
    }
    CHRD.getObj(obj.id).onblur = function(e) {//输入框失去焦点,不在图片上时,隐藏图片
        obj.blurFunc && obj.blurFunc.call(this);
        clearTimeout(CHRD.verify.timer);
        CHRD.verify.timer = setTimeout(function(){CHRD.verify()}, 200);
    }
}----------使用------------
CHRD.verify({id:'regVerify'
    ,src:userHref + 'index.php?action=captcha'
    ,blurFunc:function(){
        this.parentNode.className = '';//普框
        //无提示
        this.title && CHRD.getObj(this.id + 'Tip') && (CHRD.getObj(this.id + 'Tip').className = '', CHRD.getObj(this.id + 'Tip').innerHTML = '');
        regInputOk.call(this);
    }
    , focusFunc:function() {
        this.parentNode.className = 'on';//亮框
        //显示普提
        this.title && CHRD.getObj(this.id + 'Tip') && (CHRD.getObj(this.id + 'Tip').className = 'ng_ts', CHRD.getObj(this.id + 'Tip').innerHTML = this.title);
    }
    ,show:'dr'//在右下角
    });

js:页面多处输入只使用一个验证码/获得焦点显示/onblur隐藏实现_验证码

举报

相关推荐

0 条评论