Home > Web Front-end > JS Tutorial > JQuery text box highlight plugin code_jquery

JQuery text box highlight plugin code_jquery

WBOY
Release: 2016-05-16 18:08:40
Original
1268 people have browsed it

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:
JQuery text box highlight plugin code_jquery
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template