JQuery text box highlight plugin code_jquery

The code is as follows:

jquery-highlight.js

Copy the code The code is as follows:

/*
description:TextBox HighLight
author:Allen Liu
*/
(function($) {
$.fn.highlight = function(options) {
var defaultOpt = {
lightColor: 'yellow', /* Highlight color*/
lightTime: 1000, /* Highlight duration (unit: milliseconds) */
isFocus: true / * Whether to get 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 the code The code is as follows:

Call method:

Copy code The code is as follows:

< script type="text/javascript">
$(document).ready(function() {
$('#btnHighLight').click(function() {
$('#txtBox' ).highlight({lightColor:'red', lightTime: 1000 });
$('#txtPwd').highlight({ lightTime: 1000 });
});
});

The effect is as follows: