JS+CSS实现仿新浪微博搜索框的方法
本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>JS+CSS仿类似新浪微博搜索框的效果</title>
<styletype="text/css">
*{padding:0;margin:0;}
body{font-size:14px;}
#box{width:600px;margin:40pxauto;}
#in{width:240px;height:24px;line-height:24px;border:1pxsolid#369;border-radius:4px;box-shadow:inset002px#999;}
#suggest{display:none;position:relative;margin-top:-1px;width:240px;padding-top:1px;border:1pxsolid#369;border-top:0none;
border-radius:4px;box-shadow:inset002px#999;overflow:hidden;}
#suggesta{display:block;color:#f00;height:24px;line-height:24px;text-decoration:none;padding:04px;}
#suggesta:hover{background:#eee;}
#suggestaspan{color#369;}
</style>
<scripttype="text/javascript">
window.onload=function(){
//声明一坨变量供下面使用
varobox=document.getElementById("box");
obj=document.getElementById("in");
osug=document.getElementById("suggest");
oa=osug.getElementsByTagName("span");
//兼容ie和火狐浏览器的方式，但是经测试发现ie678可以ie9却不行在删除的时候无法触发，网上查下说有ie9这个问题
obj.oninput=obj.onpropertychange=onchange;
functiononchange(){
vartxt=this.value;
varwords=txt.length;
if(words==0){
osug.style.display="none";
}elseif(words<=8){
osug.style.display="block";
for(vari=0;len=oa.length,i<len;i++){
oa[i].innerHTML=txt;
}
}elseif(words>8){
osug.style.display="block";
varlimit=txt.substring(0,8)+"...";
for(vari=0;len=oa.length,i<len;i++){
oa[i].innerHTML=limit;
}
}
}
}
functiondisbox(){
document.getElementById("suggest").style.display="none";
}
</script>
</head>
<body>
<dlid="box">
<dt><inputonblur="disbox()"type="text"name=""id="in"/></dt>
<ddid="suggest">
<ahref="###">搜“<span></span>”相关微博</a>
<ahref="###">搜“<span></span>”相关用户</a>
</dd>
</dl>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。