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代碼：

復(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> 

效果如下：

您可能感興趣的文章:

相關(guān)文章

jquery $.trim()方法使用介紹
$.trim(str)的作用是去掉字符串首尾空格，下面為大家介紹下其具體的使用
2014-05-05
6款新穎的jQuery和CSS3進(jìn)度條插件推薦
進(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分頁器的使用
本篇文章主要介紹了jQuery中l(wèi)ayer分頁器的使用，實(shí)例介紹了layer分頁器的技巧，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。
2017-03-03
到底該拋不拋棄JQuery
這篇文章主要介紹了到底該拋不拋棄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)常會面臨一個(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