First look:
Requirement: when the input box gets the focus, the verification image is automatically displayed.
The Code is as follows (learning is only for reference ):
Copy codeThe Code is as follows:
/********************** Is the verification code object ************ *****/
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 ){
// Display for the first time
If (this. div = null ){
$ ('#' + EleName ). after ('<div style = "display: none;" id = "div_validation _' + eleName + '" title = "click to change"> </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;
// Click Change
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 ();
}
}
Usage:
Copy codeThe Code is as follows:
// Initialize the verification code object
Validation. init ('valider', 'ajax. ashx? Handle = validation ');
// The input box ID to verify the image address
// Hide
Validation. hide ();