
本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法。分享给大家供大家参考。具体实现方法如下:
代码如下:
JS+CSS仿类似新浪微博搜索框的效果
window.onload=function(){
//声明一坨变量供下面使用
var obox=document.getElementById("box");
obj=document.getElementById("in");
osug=document.getElementById("suggest");
oa=osug.getElementsByTagName("span");
//兼容ie和火狐浏览器的方式,但是经测试发现ie678可以ie9却不行在删除的时候无法触发,网上查下说有ie9这个问题
obj.oninput=obj.onpropertychange=onchange;
function onchange(){
var txt=this.value;
var words=txt.length;
if(words==0){
osug.style.display="none";
}else if(words<=8){
osug.style.display="block";
for( var i=0;len=oa.length,i
oa[i].innerHTML=txt;
}
}else if(words>8){
osug.style.display="block";
var limit=txt.substring(0,8)+"...";
for( var i=0;len=oa.length,i
oa[i].innerHTML=limit;
}
}
}
}
function disbox(){
document.getElementById("suggest").style.display="none";
}
script>
搜“”相关微博
搜“”相关用户
希望本文所述对大家的javascript程序设计有所帮助。