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

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

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

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

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