The Code is as follows:
Jquery-highlight.js
Copy codeThe Code is as follows:
/*
Description: TextBox HighLight
Author: Allen Liu
*/
(Function ($ ){
$. Fn. highlight = function (options ){
Var defaultOpt = {
LightColor: 'yellow',/* color when highlighted */
LightTime: 1000,/* highlight duration (unit: milliseconds )*/
IsFocus: true/* Whether to obtain the focus */
};
Options = $. extend (defaultOpt, options );
Return this. each (function (){
Var sender = $ (this );
If (sender. attr ('light') = undefined ){
Var _ bgColor = sender.css ('background-color ');
Sender.css ({'background-color': options. lightColor });
If (options. isFocus ){
Sender. focus ();
}
Sender. attr ('light', true );
Window. setTimeout (function (){
Sender. removeAttr ('light ');
Sender.css ({'background-color': _ bgColor });
}, Options. lightTime );
}
});
}
}) (JQuery );
Html code:
Copy codeThe Code is as follows:
<Input type = "text" id = "txtBox"/>
<Input type = "password" id = "txtPwd"/>
<Input type = "button" id = "btnHighLight" value = "highlight"/>
Call method:
Copy codeThe Code is as follows:
<Script src = "Scripts/jquery-1.5.1.min.js" type = "text/javascript"> </script>
<Script src = "Scripts/jquery-highlight.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('# BtnHighLight'). click (function (){
$ ('# TxtBox'). highlight ({lightColor: 'red', lightTime: 1000 });
$ ('# TxtPwd'). highlight ({lightTime: 1000 });
});
});
</Script>
The effect is as follows: