跨瀏覽器的placeholder-jQuery版（jQuery外掛程式EnPlaceholder）

標籤：style   blog   http   java   color   使用   2014   html   

案例：整搜尋方塊，需要預設預留位置為“請輸入關鍵詞”，擷取焦點時，預留位置消失或不可用（不影響正常輸入），丟失焦點後，若使用者無內容輸入，預留位置繼續出現，繼續佔位。這種代碼我想前端們已經很容易就寫出來了吧，現在HTML5原生就有這個“placeholder”屬性，效果與上邊案例描述的一樣（各支援的瀏覽器內部表現可能不一致，但是作用是一致的），那麼這一屬性該怎麼優雅降級到支援所有現代瀏覽器呢？答案還是指令碼即JavaScript。

上述案例的一個圖例：

 

 

下面我們就使用 Jquery 的 enplaceholder 外掛程式來實現這個效果.

效果示範介面 http://www.ifrans.cn/demo/enplaceholder.html

用法：

首先在head中分別引入jQuery及本外掛程式

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="jquery.enplaceholder.js"></script>

然後就可以調用鳥

//通過value類比placeholder

$(‘input‘).placeholder();

//通過插入span元素類比placeholder

$(‘input‘).placeholder({isUseSpan:true});