三层分离的道理：使用jQuery类库

<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';}" />

三层分离道理很简朴，但是要用例子来说清晰也不易。今天优化“搜索”功能时溘然想到，这便是个很典型的示范。改造思路是把行为剥离，由于本站在使用jQuery类库，因此考虑用jQuery语句来实现。

用文字来描述交互：默认淡色#bbbbbb文字提示录入字段，用户点击录入时颜色会加深#333333正常，但当退格删掉所录内容input内值为空时，会恢复淡色默认提示。

产品使用过程中，往往通过定义外层搜索模块.search来传递控制这个录入框和按钮的展示效果，如上我还定义了个.text用于同一控制表单的文本录入框如如斯从三层分离的角度看，目前只做到了结构、表现分离，而结构、行为是绑到一起的，并不符合Web Standard设计思惟。从头开始，我一般会选择如下代码作为搜索录入框原型，以前做的HTML原型都用这个：

<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/>