一個體貼使用者的系統，通常都會在一些輸入框中加上貼心的提示，像 MSN 的搜尋框就有這樣的提示功能。基本常看到的做法都是先變更輸入框的 value 值為提示的內容，這樣的做法雖然簡單但最後表單要送出或是驗證時，都要先進行內容的過濾，畢竟總不可能把提示的內容往後端傳送吧！
這樣雖然能達到想要的提示效果，但總覺得不夠方便直覺，且變化度也不夠，因此筆者就想到改用類似浮水印的方式來達成同樣的功能。詳細的教學請參閱：浮水印式的輸入框提示
套件名稱：WaterMark
套件版本：1.0
作者網站：http://abgne.tw/jquery/jquery-plugins/watermark-1-0.html
套件網址：N/A
發佈日期：2009-08-01
檔案大小：1.29 KB
檔案下載：jquery.watermark.js
參數說明：
1 2 3 4 5 6 7 | waterCss(選填) 描述： 浮水印所要套用的樣式 className 預設值： '' useInputCss(選填) 描述： 是否再套用輸入框或文字框的 className 預設值： true |
方法說明：
1 2 3 4 5 | // 幫指定的輸入框或是文字框加上浮水印的提示效果 $(...).waterMark(options); // 修改預設的參數 $.waterMark.defaults = options; |
使用範例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.watermark.js"></script> <style type="text/css"> <!-- .c3 { color: blue; } div.c1 { color: #ccc; background-image: url(images/sprite.png); background-repeat: no-repeat; background-position: 134px -2038px; } div.c2 { color: red; background-image: url(images/sprite.png); background-repeat: no-repeat; background-position: 3px -2669px; } div.c3 { color: #ccc; background-color: #ff9; } } --> </style> <script type="text/javascript"> <!-- $(function(){ $(":text, textarea").waterMark(); }); //--> </script> <body> <input type="text" name="" title="搜尋聯絡人或網址..." class="c1" /> <br /> <input type="text" name="" title="" class="c2" /> <br /> <input type="text" name="" title="請輸入密碼" class="c3" /> <br /> <textarea name="" rows="5" cols="20" title="寫寫自己的喜好"></textarea> </body> |
範例瀏覽：
http://demonstration.abgne.tw/jquery/plugins/0048/0048.html
相關連結
推薦內容