JQuery文本框高亮顯示插件代碼
更新時間：2011年04月02日 00:13:41 作者：
JQuery 中沒有文本框高亮顯示這個插件，自己今天寫了一個Plugin，把代碼貼出來分享一下
代碼如下：
jquery-highlight.js
/*
description:TextBox HighLight
author:Allen Liu
*/
(function($) {
$.fn.highlight = function(options) {
var defaultOpt = {
lightColor: 'yellow', /* 高亮?xí)r的顏色 */
lightTime: 1000, /* 高亮?xí)r長 （單位：毫秒） */
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" />
調(diào)用方法：
<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>
效果如下：
jquery-highlight.js
復(fù)制代碼 代碼如下:
/*
description:TextBox HighLight
author:Allen Liu
*/
(function($) {
$.fn.highlight = function(options) {
var defaultOpt = {
lightColor: 'yellow', /* 高亮?xí)r的顏色 */
lightTime: 1000, /* 高亮?xí)r長 （單位：毫秒） */
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代碼：
復(fù)制代碼 代碼如下:
<input type="text" id="txtBox" />
<input type="password" id="txtPwd" />
<input type="button" id="btnHighLight" value="highlight" />
調(diào)用方法：
復(fù)制代碼 代碼如下:
<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>
效果如下：
您可能感興趣的文章:
- 比較不錯的JS/JQuery顯示或隱藏文本的方法
- 基于JQuery實現(xiàn)鼠標點擊文本框顯示隱藏提示文本
- Jquery 高亮顯示文本中重要的關(guān)鍵字
- 前端html中jQuery實現(xiàn)對文本的搜索功能并把搜索相關(guān)內(nèi)容顯示出來
- jQuery實現(xiàn)鼠標單擊網(wǎng)頁文字后在文本框顯示的方法
- jQuery實現(xiàn)鼠標跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)
- jQuery獲取標簽文本內(nèi)容和html內(nèi)容的方法
- jQuery取得設(shè)置清空select選擇的文本與值
- 使用Jquery實現(xiàn)點擊文字后變成文本框且可修改
- jQuery實現(xiàn)文本顯示一段時間后隱藏的方法分析
相關(guān)文章
$.trim(str)的作用是去掉字符串首尾空格，下面為大家介紹下其具體的使用2014-05-05
進度條和Loading加載動畫在當(dāng)今的網(wǎng)頁功能中顯得越來越重要了，于是接下來為大家推薦幾款比較新穎進度條插件,感興趣的你可以參考下希望可以幫助到你2013-03-03
jquery操作select option 的代碼小結(jié)
jquery操作select option 的代碼小結(jié),需要的朋友可以參考下。2011-06-06
jQuery實現(xiàn)的自適應(yīng)焦點圖效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)的自適應(yīng)焦點圖效果,結(jié)合完整實例形式分析了jQuery事件響應(yīng)及動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了一個實用的圖片切換支持點擊切換和自動輪播，經(jīng)測試效果相當(dāng)不錯，需要的朋友可以參考下2014-09-09
本篇文章主要介紹了jQuery中l(wèi)ayer分頁器的使用，實例介紹了layer分頁器的技巧，非常具有實用價值，需要的朋友可以參考下。2017-03-03
這篇文章主要介紹了到底該拋不拋棄JQuery，對JS框架感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要為大家詳細介紹了jquery實現(xiàn)點擊左右按鈕切換圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
基于jQuery實現(xiàn)的水平和垂直居中的div窗口
在建立網(wǎng)頁布局的時候，我們經(jīng)常會面臨一個問題，就是讓一個div實現(xiàn)水平和垂直居中，雖然好幾種方式實現(xiàn)，但是今天介紹時我最喜歡的方法，通過css和jQuery實現(xiàn)。2011-08-08
jQuery Validate 插件為表單提供了強大的驗證功能,讓客戶端表單驗證變得更簡單,同時提供了大量的定制選項,滿足應(yīng)用程序各種需求。有興趣的可以了解一下。2016-12-12