当前位置:Gxlcms > JavaScript > JQuery文本框高亮显示插件代码

JQuery文本框高亮显示插件代码

时间:2021-07-01 10:21:17 帮助过:9人阅读

代码如下:

jquery-highlight.js

代码如下:
  1. <br>/* <br>description:TextBox HighLight <br>author:Allen Liu <br>*/ <br>(function($) { <br>$.fn.highlight = function(options) { <br>var defaultOpt = { <br>lightColor: 'yellow', /* 高亮时的颜色 */ <br>lightTime: 1000, /* 高亮时长 (单位:毫秒) */ <br>isFocus: true /* 是否获取焦点 */ <br>}; <br><br>options = $.extend(defaultOpt, options); <br>return this.each(function() { <br>var sender = $(this); <br>if (sender.attr('light') == undefined) { <br>var _bgColor = sender.css('background-color'); <br>sender.css({ 'background-color': options.lightColor }); <br>if (options.isFocus) { <br>sender.focus(); <br>} <br><br>sender.attr('light', true); <br>window.setTimeout(function() { <br>sender.removeAttr('light'); <br>sender.css({ 'background-color': _bgColor }); <br>}, options.lightTime); <br>} <br>}); <br>} <br>})(jQuery); <br><br> <br>Html代码: <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><input type="text" id="txtBox" /> <br><input type="password" id="txtPwd" /> <br><input type="button" id="btnHighLight" value="highlight" /> <br> <br>调用方法: <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><script src="Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> <br><script src="Scripts/jquery-highlight.js" type="text/javascript"></script> <br><script type="text/javascript"> <br>$(document).ready(function() { <br>$('#btnHighLight').click(function() { <br>$('#txtBox').highlight({lightColor:'red', lightTime: 1000 }); <br>$('#txtPwd').highlight({ lightTime: 1000 }); <br>}); <br>}); <br></script> <br> <br>效果如下: <br><img border="0" src="https://img.gxlcms.com//Uploads-s/new/2019-09-17-201917/20110402001337864.png"></li><li> </li><li> </li></ol></pre></li></ol></pre>

人气教程排行