jQuery Textbox Hinter  實際執行畫面

網站上通常都會有讓使用者方便搜尋你的網站資料的搜尋框，但是在搜尋框的前面或後面加上文字總感覺不太有設計感，所以有了這一個基於 jQuery 框架下的一個套件，jQuery Textbox Hinter 是一個可以在表單元素 input 和 textarea 兩種文字輸入框上加上文字，讓使用者一看就知道他該輸入什麼資料，也不會浪費空間又不用為了整體設計傷透腦筋。設計後就類似 Facebook 的搜尋框一樣，淡淡的提示文字一看便知。

使用方法：
第一步 先載入程式所需要的檔案
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
//jQuery Easy ticker 的主程式碼
<script src="/resources/js/jquery.textbox-hinter.min.js" type="text/javascript"></script>

第二步 設置表單元件
<input type="text" class="demo1" size="70" />
<textarea cols="55" rows="7" class="demo2"></textarea>
<input type="text" class="demo3" size="70" />
<textarea cols="55" rows="7" class="demo4"></textarea>

第三步 設計文字的 CSS 樣式
.greyText{
color: #CCCCCC;
}
.greyTextItalics{
color: #CCCCCC;
font-style: italic;
}

第四步 寫入 JavaScript 讓套件起作用
$(function(){
  $('.demo1').tbHinter({
text: 'A hint for this textbox'
  });
  $('.demo2').tbHinter({
text: 'A hint can be added to a <textarea> also'
  });
  $('.demo3').tbHinter({
text: 'A default class can be added to the hint text like this',
class: 'greyText'
  });
  $('.demo4').tbHinter({
text: '輸入文字',           // 文字框上顯示的文字
class: 'greyTextItalics'  // 顯示文字的樣式
  });
});

作者網站：http://www.aakashweb.com/jquery-plugins/textbox-hinter/
檔案大小：2.45 KB
檔案下載：http://www.aakashweb.com/resources/downloads/jquery.textbox-hinter.zip
檔案備份：下載