簡單實現(xiàn)的JQuery文本框水印插件
采用JQuery實現(xiàn)文本框的水印效果非常容易,效果如下:
代碼片段,定義要應(yīng)用水印效果的文本框的樣式: .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: "站內(nèi)檢索", className: "watermark", }); }); </script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery中的bind綁定事件與文本框改變事件的臨時解決方法
- jquery關(guān)于頁面焦點的定位(文本框獲取焦點時改變樣式 )
- 基于jquery的設(shè)置頁面文本框 只能輸入數(shù)字的實現(xiàn)代碼
- JQuery獲取文本框中字符長度的代碼
- 在js(jquery)中獲得文本框焦點和失去焦點的方法
- jQuery文本框(input textare)事件綁定方法教程
- 使用Jquery實現(xiàn)點擊文字后變成文本框且可修改
- jquery設(shè)置text的值示例(設(shè)置文本框 DIV 表單值)
- 文本框水印提示效果的簡單實現(xiàn)代碼
- jQuery實現(xiàn)為控件添加水印文字效果(附源碼)
相關(guān)文章
jquery控制頁面的展開和隱藏實現(xiàn)方法(推薦)
下面小編就為大家?guī)硪黄猨query控制頁面的展開和隱藏實現(xiàn)方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10jquery隱藏標(biāo)簽和顯示標(biāo)簽的實例
在jquery中我們要實現(xiàn)點擊按鈕隱藏標(biāo)簽和顯示標(biāo)簽,只要綁定指定button或其它,這樣點擊時調(diào)用hide或show函數(shù)即可解決,下面看個實例就明白了2013-11-11基于jQuery實現(xiàn)的仿百度首頁滑動選項卡效果代碼
這篇文章主要介紹了基于jQuery實現(xiàn)的仿百度首頁滑動選項卡效果代碼,涉及jQuery響應(yīng)鼠標(biāo)事件實現(xiàn)頁面元素動態(tài)變換的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11jQuery中的bind綁定事件與文本框改變事件的臨時解決方法
暫時沒有想到什么好的解決辦法,我現(xiàn)在加了個瀏覽器判斷非ie的話就注冊blur事件,這樣有個問題就是blur實在別的控件活動焦點的時候,txtStation控件注冊的方法是為了填充它緊挨著的一個下拉列表2010-08-08基于jQuery的樹控件實現(xiàn)代碼(asp.net+json)
一個自己寫jQuery的樹控件,后臺用的是asp.net,其實只要服務(wù)器返回json就可以了2010-07-07jquery實現(xiàn)的動態(tài)回到頂部特效代碼
這篇文章主要介紹了jquery實現(xiàn)的動態(tài)回到頂部特效代碼,涉及jQuery基于時間函數(shù)的定時遞歸調(diào)用實現(xiàn)帶緩沖效果的移動功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10