先看效果圖:
要求:當輸入框獲得焦點時,自動顯示驗證圖片。
代碼如下(學習而已,僅供參考):
/***********************下是驗證碼對象*****************/var Validation = {};Validation.init = function(eleName,imageSrc){ this.image = imageSrc; $('#'+eleName).focusin(function(){ Validation.show(eleName); });}Validation.image = '';Validation.display=false;Validation.width = '100px';Validation.height = '30px';Validation.div = null;Validation.show = function(eleName){ if(this.display==false){ //首次顯示 if(this.div==null){ $('#'+eleName).after('<div style="display:none;" id="div_validation_'+eleName+'" title="點擊更換"></div>'); this.div = $('#div_validation_'+eleName); this.div.css('position','absolute'); this.div.css('cursor','pointer'); this.div.css('border','1px solid #CCC'); this.div.css('background-color','#FFF'); this.div.css('background-position','center'); this.div.css('background-repeat','no-repeat'); this.div.css('height',this.height); this.div.css('width',this.width); var objOffset = $('#'+eleName).offset(); objOffset.top+=$('#'+eleName).height()+6; this.div.offset(objOffset); this.div.css('background-image','url('+Validation.image+'&_t='+new Date()+')'); this.div.css('display','inline-block'); this.display = true; //點擊更換 this.div.click(function(){ Validation.div.css('background-image','url('+Validation.image+'&_t='+new Date()+')'); }); } else{ this.div.css('background-image','url('+Validation.image+'&_t='+new Date()+')'); this.display = true; this.div.css('display','inline-block'); } }}Validation.hide =function(){ if(this.display==true){ this.display = false; this.div.hide(); }}
使用方式:
//驗證碼對象初始化Validation.init('validation','Ajax.ashx?handle=validation');// 輸入框ID 驗證圖片地址 //隱藏Validation.hide();
以上就是本文的全部內容,希望對大家的學習有所幫助。
新聞熱點
疑難解答