JS+CSS實現(xiàn)仿新浪微博搜索框的方法
更新時間：2015年02月24日 15:33:16 作者：代碼家園
這篇文章主要介紹了JS+CSS實現(xiàn)仿新浪微博搜索框的方法,實例分析了javascript針對搜索框樣式的控制技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了JS+CSS實現(xiàn)仿新浪微博搜索框的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!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)測試發(fā)現(xiàn)ie678可以ie9卻不行在刪除的時候無法觸發(fā)，網(wǎng)上查下說有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<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>
<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)測試發(fā)現(xiàn)ie678可以ie9卻不行在刪除的時候無法觸發(fā)，網(wǎng)上查下說有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<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>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
相關(guān)文章
本篇文章主要是對通過隱藏iframe實現(xiàn)文件下載的js方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
Ionic項目中如何使用Native Camera？這篇文章主要介紹了Ionic項目中Native Camera的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
plugin是插件的意思,通常是用于對某個現(xiàn)有的架構(gòu)進行擴展,下面這篇文章主要給大家介紹了關(guān)于webpack?Plugin的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
JS實現(xiàn)數(shù)據(jù)動態(tài)渲染的豎向步驟條
這篇文章主要為大家詳細介紹了JS實現(xiàn)數(shù)據(jù)動態(tài)渲染的豎向步驟條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
!!一般用來將后面的表達式強制轉(zhuǎn)換為布爾類型的數(shù)據(jù)（boolean），也就是只能是true或者false。下面看看通過本文給大家介紹了JS中的!!，需要的朋友參考下吧2017-12-12
本篇文章給大家分享的內(nèi)容是利用js如何獲取本日、本周、本月的時間代碼，有一定的參考價值，有需要的朋友可以參考一下2020-02-02
空值合并運算符是一個邏輯運算符,當(dāng)左側(cè)的操作數(shù)為null或undefined時,會返回右側(cè)操作數(shù),否則返回左側(cè)操作數(shù),本文就來詳細的介紹一下如何使用2023-12-12
JavaScript實現(xiàn)的反序列化json字符串操作示例
這篇文章主要介紹了JavaScript實現(xiàn)的反序列化json字符串操作,結(jié)合實例形式分析了eval與JSON.parse兩種反序列化json字符串的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
JavaScript實現(xiàn)刪除,移動和復(fù)制文件的方法
這篇文章主要介紹了JavaScript實現(xiàn)刪除,移動和復(fù)制文件的方法,涉及javascript使用ActiveXObject控件操作文件的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JS delegate與live，有需要的朋友可以參考一下2013-12-12