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