簡單實現(xiàn)的JQuery文本框水印插件
更新時間:2016年06月14日 09:56:08 作者:Jaxu
這篇文章主要為大家詳細介紹了簡單實現(xiàn)JQuery文本框水印插件的相關代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
采用JQuery實現(xiàn)文本框的水印效果非常容易,效果如下:

代碼片段,定義要應用水印效果的文本框的樣式: .watermark { color: #cccccc; }
將JavaScript代碼封裝成JQuery的插件:
(function ($) {
$.fn.watermark = function (options) {
var settings = $.extend({
watermarkText: "Input something here",
className: "watermark"
}, options);
return this.each(function () { if ($(this).val().length == 0 || $(this).val() == settings.watermarkText) {
//init, set watermark text and class
$(this).val(settings.watermarkText).addClass(settings.className); }
//if blur and no value inside, set watermark text and class again.
$(this).blur(function () {
if ($(this).val().length == 0) {
$(this).val(settings.watermarkText).addClass(settings.className);
}
});
//if focus and text is watermrk, set it to empty and remove the watermark class
$(this).focus(function () {
if ($(this).val() == settings.watermarkText) {
$(this).val('').removeClass(settings.className);
}
});
});
}
})(jQuery);
接下來直接在頁面上使用:
<div class="search_box">
<input id="tb_search" type="text" />
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#tb_search").watermark({
watermarkText: "站內檢索",
className: "watermark",
});
});
</script>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
jquery控制頁面的展開和隱藏實現(xiàn)方法(推薦)
下面小編就為大家?guī)硪黄猨query控制頁面的展開和隱藏實現(xiàn)方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
基于jQuery實現(xiàn)的仿百度首頁滑動選項卡效果代碼
這篇文章主要介紹了基于jQuery實現(xiàn)的仿百度首頁滑動選項卡效果代碼,涉及jQuery響應鼠標事件實現(xiàn)頁面元素動態(tài)變換的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
jQuery中的bind綁定事件與文本框改變事件的臨時解決方法
暫時沒有想到什么好的解決辦法,我現(xiàn)在加了個瀏覽器判斷非ie的話就注冊blur事件,這樣有個問題就是blur實在別的控件活動焦點的時候,txtStation控件注冊的方法是為了填充它緊挨著的一個下拉列表2010-08-08
基于jQuery的樹控件實現(xiàn)代碼(asp.net+json)
一個自己寫jQuery的樹控件,后臺用的是asp.net,其實只要服務器返回json就可以了2010-07-07
jquery實現(xiàn)的動態(tài)回到頂部特效代碼
這篇文章主要介紹了jquery實現(xiàn)的動態(tài)回到頂部特效代碼,涉及jQuery基于時間函數(shù)的定時遞歸調用實現(xiàn)帶緩沖效果的移動功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10

