最近逛Y宝的X猫，猛然发现搜索框已经悄然变样了，变得更加的有趣和智能，搜索框里会自动显示热门的搜索词且每隔一段时候换一个，我觉得这样的好处是，既帮X猫自己做的广告推送又免去用户搜索的麻烦，可谓一举两得。而享受此搜索框带来的方便同时，我却在思考如何实现这样一个搜索框的问题了，正所谓：三句话不离老本行吧！：）当天我就抽空做了一个，时间和技术有限，纯属业余之作，大家全当看看做个参考吧。
JavaScript代码：
[mw_shl_code=javascript,true]var defval="SKII 入驻X猫";//默认显示的文本框内容
//文本框失去焦点的方法
function blurMd(){
if(val.length==0){
document.getElementById("txt").value=defval;
grayStyle();
}else if(val==defval){
grayStyle();
}
}
//点击文本框触发的方法
function clickMd(){
var val=document.getElementById("txt").value;
if(val==defval){
var a =document.getElementById("txt").createTextRange();
a.moveStart('character',0);
a.collapse(true);
a.select();
lgrayStyle();//改样式为浅灰色
}
}
//将文本框字体颜色设置为淡灰色
function lgrayStyle(){
document.getElementById("txt").style.color="lightgray";
}
//将文本框字体颜色设置为灰色
function grayStyle(){
document.getElementById("txt").style.color="gray";
}
//将文本框字体颜色设置为黑色
function blackStyle(){
document.getElementById("txt").style.color="black";
}
window.onload=function(){
document.getElementById("txt").value=defval;//初始化显示内容
clickMd();//移动光标到首位
grayStyle();//文本灰色样式
//文本框点击事件
document.getElementById("txt").onkeydown=function(){
var val=document.getElementById("txt").value;//获得当前文本框的内容
if(val==defval&&(event.keyCode==37||event.keyCode==39)){//如果输入的是左右键并且是默认内容，则不做处理
//return false;
this.blur();//失去焦点
}else{
blackStyle();//改为黑色样式
if(val==defval){//如果是默认内容则清空，并且样式改为灰色
document.getElementById("txt").value="";
}
}
}
//搜索按钮点击事件-应该是带入文本框内容到后台查询的，我这里只做一个取值的展示
document.getElementById("btn").onclick=function(){
alert("您即将搜索的内容是："+document.getElementById("txt").value);//显示当前文本框的内容
}
}[/mw_shl_code]
HTML代码：
[mw_shl_code=html,true]<input type="text" id="txt" onblur="blurMd()" onkeydown="keydownMd()" onclick="clickMd()" /><input type="button" id="btn" value="搜索"/>[/mw_shl_code]
上面的代码插入相应标签内可直接运行（已亲测），可能存在一些小bug大家参考下吧！#6958!