<input class="text" size=15 type="text" name="search_key" style="color:#bbb;" value="志號、名稱" onfocus="if(this.value=='志號、名稱'){this.value='';this.style.color='#333333';}" onblur="if(this.value==''){this.value='志號、名稱';this.style.color='#bbbbbb';}" />

三層分離道理很簡樸，但是要用例子來說清晰也不易。今天優(yōu)化“搜索”功能時(shí)溘然想到，這便是個(gè)很典型的示范。改造思路是把行為剝離，由于本站在使用jQuery類庫，因此考慮用jQuery語句來實(shí)現(xiàn)。

用文字來描述交互：默認(rèn)淡色#bbbbbb文字提示錄入字段，用戶點(diǎn)擊錄入時(shí)顏色會加深#333333正常，但當(dāng)退格刪掉所錄內(nèi)容input內(nèi)值為空時(shí)，會恢復(fù)淡色默認(rèn)提示。

產(chǎn)品使用過程中，往往通過定義外層搜索模塊.search來傳遞控制這個(gè)錄入框和按鈕的展示效果，如上我還定義了個(gè).text用于同一控制表單的文本錄入框如如斯從三層分離的角度看，目前只做到了結(jié)構(gòu)、表現(xiàn)分離，而結(jié)構(gòu)、行為是綁到一起的，并不符合Web Standard設(shè)計(jì)思惟。從頭開始，我一般會選擇如下代碼作為搜索錄入框原型，以前做的HTML原型都用這個(gè)：

<script type="text/javascript"/>
jQuery(function($){
$('.search input[name=search_key]').focus(function(){
if($.trim(this.value)==='志號、名稱'){
this.value='';
$(this).addClass('focus');
}
}).blur(function(){
if($.trim(this.value)===''){
this.value='志號、名稱';
$(this).removeClass('focus');
}
});
});
</script/>