input 輸入框獲得/失去焦點時隱藏/顯示文字

這個標題可能比較拗口不好理解，但是我相信所有的人都見過這個效果，大家可以看本站右上方的搜尋輸入框，預設顯示著“輸入搜尋內容”的提示，當這個 input 輸入框獲得焦點時，就自動清空等待使用者輸入，當使用者啥也沒輸入就離開這個 input 輸入框時，輸入框內又再次顯示“輸入搜尋內容”的提示。是不是很常見？很多搜尋、登入、表單都會用到這個效果，但是我看了N多個網站，有90%以上是這麼實現的：

<input type= "text" value= "不推薦這麼做" onfocus= "if(this.value == '不推薦這麼做') this.value = ''" onblur= "if(this.value == '') this.value = '不推薦這麼做'" />

我是非常反對把 javascript 寫在 html 標籤裡的，這和 style 寫在 html 標籤裡一樣，雖然不違反 W3C 標準，但也不推薦這麼寫。因為：

1、完全沒有複用性可言，如果是個表單，輸入框很多，每個都需要這樣的效果，那就每個都這麼處理嗎？

2、如果要修改其中的提示文字，費時費力又不好維護。

3、我們倡導結構（html）、表現（css）、行為（javascript）三者分離，這才是一個好的頁面。

那要怎麼寫才能實現這個效果，而且既有複用性，又好維護，又不需要把 js 寫進 html 裡呢？

相信我們都有載入 jQuery，我就基於 jQuery 寫了一個方法，先看 DEMO，具體方法如下：

1、html 部分：

<input type= "text" id= "input_test" value= "input 提示測試" />

2、引入 jQuery：

<script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>

3、執行指令碼：

$( function() {
   
var inputEl = $(
'#input_test'),

        defVal = inputEl.val();

    inputEl.bind({

        focus:
function() {

           
var _this = $(
this);

           
if (_this.val() == defVal) {

                _this.val(
'');

            }

        },

        blur:
function() {

           
var _this = $(
this);

           
if (_this.val() ==
'') {

                _this.val(defVal);

            }

        }

    });

})

實現的最終效果是一樣一樣的，或許是我個人的代碼潔癖，但我相信，好代碼從細節開始！