一個體貼使用者的系統,通常都會在一些輸入框中加上貼心的提示,像 MSN 的搜尋框就有這樣的提示功能。基本常看到的做法都是先變更輸入框的 value 值為提示的內容,這樣的做法雖然簡單但最後表單要送出或是驗證時,都要先進行內容的過濾,畢竟總不可能把提示的內容往後端傳送吧!
這樣雖然能達到想要的提示效果,但總覺得不夠方便直覺,且變化度也不夠,因此筆者就想到改用類似浮水印的方式來達成同樣的功能。詳細的教學請參閱:浮水印式的輸入框提示
套件名稱:WaterMark
套件版本:1.1
作者網站:http://abgne.tw/jquery/jquery-plugins/watermark-1-0.html
套件網址:N/A
發佈日期:2010-11-24
檔案大小:1.84 KB
檔案下載:jquery.watermark.js
參數說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 | waterCss(選填) 描述: 浮水印所要套用的樣式 className 預設值: '' useInputCss(選填) 描述: 是否再套用輸入框或文字框的 className 預設值: true |
方法說明:
檢視原始碼 JavaScript
1 2 3 4 5 | // 幫指定的輸入框或是文字框加上浮水印的提示效果 $(selector).waterMark(options); // 修改預設的參數 $.waterMark.defaults = options; |
使用範例:
檢視原始碼 JavaScript
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 | <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> |
格爾大大
填了內容,按f5結果會提示效果與內容混合在一起說
有什麼解決的方法嗎?
請改用新版的 js 後測看看。
你好,想請問
我在做好的浮水印表單中key了文字,設了一個link到下一頁,但用瀏覽器功能按上一頁回去時
就會發生提示效果與內容混合在一起
請問有什麼辦法解決嗎?
你用的瀏覽器是什麼?我試 Chrome 及 IE9 都沒發生這問題。
還是你弄個簡單但是有問題的範例給我試試~
我用ie6~9 FireFox Chrome 都會有這個問題耶
是我哪裡有用錯嗎?
範例網址 http://dl.dropbox.com/u/55205275/WaterMark.zip
麻煩格爾大大幫我看一下了!! 謝謝
已回信~
收到了!! 問題有解決了!!
感謝格爾大大!!!