HTML5 有針對表單輸入元素加入 placeholder 的新屬性，它可以用來當做提示字使用。不過 IE 10 以下的全部都不支援，所以囉~為了能向下相容，因此就有人寫了個 jQuery-Placeholder 這套件哩！
套件名稱：jQuery-Placeholder
套件網址：N/A
作者網站：https://github.com/danielstocks/jQuery-Placeholder/
套件網址：N/A
發佈日期：2011-04-07
檔案大小：4.11 KB
檔案下載：jquery.placeholder.js
HTML 屬性說明：
檢視原始碼 JavaScript
1 | 無 |
方法說明：
檢視原始碼 JavaScript
1 2 | // 把指定的元素加上 placeholder $(selector).placeholder(); |
使用範例：
檢視原始碼 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 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.placeholder.js"></script> <style type="text/css"> /* 設定提示字的文字顏色 */ ::-webkit-input-placeholder { color: red; } :-moz-placeholder { color: red; } .placeholder { color: #ccc; } </style> <script type="text/javascript"> $(function(){ // 幫有 placeholder 屬性的輸入框加上提示效果 $('input[placeholder]').placeholder(); }); </script> <body> <h2>有使用 placeholder</h2> <p><input type="text" placeholder="提示" name="a"></p> <p><input type="password" placeholder="密碼" name="b"></p> <h2>沒有使用 placeholders</h2> <p><input type="text" name="c"></p> <p><input type="password" name="d"></p> </body> |
備註:
要改變提示字的樣式的話，可以利用 .placeholder 的方式來指定。而在 webkit 上則用 ::-webkit-input-placeholder，在 mozila 上則用 :-moz-placeholder。
這個太棒了！！
1.3版有新增一個清除的功能
使用IE的時候就知道了，都不填直接送出也會過(因為placeholder的內容是輸入在裡面)
所以 IE 用的時候要特別找時機判斷使用
$.Placeholder.cleanBeforeSubmit();
PS.
這個的不知道會不會有這問題
因為我用的作者好像不同人 XD
https://code.google.com/p/jquery-placeholder-js/
嗯嗯, 不過我看作者應該是有在外掛中加入 submit 的處理