跨瀏覽器支持Placeholder

一、什麼是 Placeholder ？

在 HTML5 的 input 標籤中新增了一個 placeholder 屬性，作用是在輸入框中默認顯示一些提示文字，以創造更好的用戶體驗。

使用方法：

<input type="text" placeholder="Username" />

查看 Demo

該特性僅被現代瀏覽器支持，在舊版 IE 下我們可以使用 javascript 來模擬實現。

二、Placeholder 的 js 實現

var doc = document,
inputs = doc.getElementsByTagName('input'),
 
// 檢測 placeholder 支持
supportPlaceholder = 'placeholder' in doc.createElement('input'),
 
/*
 * 創建 placeholder
 * @param {ELEMENT} input 傳入的 input 對象
 * @return {VOID}
 * @author: sofish Lin http://sofish.de
 */
placeholder = function (input) {
    var text = input.getAttribute('placeholder'),
        defaultValue = input.defaultValue;
 
    // 製作一個假 placeholder
    // 需要 css 配合，在 JS 中設置 style 並不太好
    input.value = text;
 
    // 聚焦去掉假 placeholder
    input.onfocus = function () {
        if (input.value === defaultValue || input.value === text) {
            this.value = '';
        }
    }
 
    // 當失焦值為空時，補回 placeholder 的值
    input.onblur = function () {
        if (input.value === '') {
            this.value = text;
        }
    }
};
 
if (!supportPlaceholder) {
    for (var i = 0, len = inputs.length; i < len; i++) {
        var input = inputs[i],
            text = input.getAttribute('placeholder');
 
        // 當 input[type=text] 並且 placeholder 值不為空是執行
        if (input.type === 'text' && text) {
            placeholder(input);
        }
    }
}

三、Placeholder 的 jQuery 插件

為了讓代碼可以重用，而不必為頁面中每個 <input> 都寫上相應的處理邏輯，有人專門寫了一個 jQuery 下的插件。於是我們只需在頁面引用一段 js ，就可以像 HTML5 的標準寫法一樣，在 input 中添加屬性 placeholder 來實現這個效果了，簡潔高效。同時，在 HTML5 時代真正來臨時（也就是所有主流瀏覽器都開始支持 HTML5 的時候），直接移除這個插件的 js 引用即可，無需做任何重構。

插件主頁：
http://webcloud.se/code/jQuery-Placeholder/

題外話：工作以後，每天都在趕項目進度，沒有時間思考和學習了，直到今天聖誕節長假才有空更新博客。不管怎樣，一定要堅持每天看完 GR 訂閱，堅持解決重大架構問題要寫 Blog 記筆記。各位還身處校園的同學，好好珍惜自由的時間吧，那是你可以自主把握的，讓它更有價值和意義。