這篇文章主要為大家詳細(xì)介紹了jQuery點(diǎn)擊輸入框顯示驗(yàn)證碼圖片，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
先看效果圖：
要求：當(dāng)輸入框獲得焦點(diǎn)時(shí)，自動(dòng)顯示驗(yàn)證圖片。
代碼如下（學(xué)習(xí)而已，僅供參考）：
/***********************下是驗(yàn)證碼對(duì)象*****************/
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 id="div_validation_'+eleName+'"></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;
//點(diǎn)擊更換
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();
}
}
使用方式：
//驗(yàn)證碼對(duì)象初始化
Validation.init('validation','Ajax.ashx?handle=validation');
// 輸入框ID 驗(yàn)證圖片地址
//隱藏
Validation.hide();
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。