JQuery文本框高亮显示插件代码
短信预约 -IT技能 免费直播动态提醒
代码如下：
jquery-highlight.js
(function($) {
$.fn.highlight = function(options) {
var defaultOpt = {
lightColor: 'yellow',
lightTime: 1000,
isFocus: true
};
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代码：
<input type="text" id="txtBox" />
<input type="password" id="txtPwd" />
<input type="button" id="btnHighLight" value="highlight" />
调用方法：
<script class="lazy" data-src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script class="lazy" data-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>
效果如下：
![]()
jquery-highlight.js
复制代码 代码如下:
(function($) {
$.fn.highlight = function(options) {
var defaultOpt = {
lightColor: 'yellow',
lightTime: 1000,
isFocus: true
};
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代码：
复制代码 代码如下:
<input type="text" id="txtBox" />
<input type="password" id="txtPwd" />
<input type="button" id="btnHighLight" value="highlight" />
调用方法：
复制代码 代码如下:
<script class="lazy" data-src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script class="lazy" data-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>
效果如下：
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
