快捷導(dǎo)航

JS+CSS實(shí)現(xiàn)仿新浪微博搜索框的方法

更新時(shí)間：2015年02月24日 15:33:16 作者：代碼家園

這篇文章主要介紹了JS+CSS實(shí)現(xiàn)仿新浪微博搜索框的方法,實(shí)例分析了javascript針對(duì)搜索框樣式的控制技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS+CSS實(shí)現(xiàn)仿新浪微博搜索框的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

 <title>JS+CSS仿類似新浪微博搜索框的效果</title>

 <style type="text/css">

 * { padding:0; margin:0;}

 body { font-size:14px; }

 #box { width:600px; margin:40px auto;}

 #in { width:240px; height:24px; line-height:24px; border:1px solid #369; border-radius:4px; box-shadow:inset 0 0 2px #999; }

 #suggest { display:none; position:relative; margin-top:-1px; width:240px; padding-top:1px; border:1px solid #369; border-top:0 none;

border-radius:4px; box-shadow:inset 0 0 2px #999; overflow:hidden; }

 #suggest a { display:block; color:#f00; height:24px; line-height:24px; text-decoration:none; padding:0 4px;}

 #suggest a:hover { background:#eee;}

 #suggest a span { color#369;}

  </style>

  <script type="text/javascript">

 window.onload=function(){

 //聲明一坨變量供下面使用

 var obox=document.getElementById("box");

 obj=document.getElementById("in");

 osug=document.getElementById("suggest");

 oa=osug.getElementsByTagName("span");

//兼容ie和火狐瀏覽器的方式，但是經(jīng)測(cè)試發(fā)現(xiàn)ie678可以ie9卻不行在刪除的時(shí)候無法觸發(fā)，網(wǎng)上查下說有ie9這個(gè)問題

 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<len;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<len;i++){

    oa[i].innerHTML=limit;

   }

  }

 }

}

function disbox(){

   document.getElementById("suggest").style.display="none";

  }

</script>

</head>

<body>

 <dl id="box">

  <dt><input onblur="disbox()" type="text" name="" id="in" /></dt>

  <dd id="suggest" >

        <a href="###">搜“<span></span>”相關(guān)微博</a>

        <a href="###">搜“<span></span>”相關(guān)用戶</a>

  </dd>

 </dl>

</body>

</html>