この記事では、Sina Weibo検索ボックスを実装するJS+CSSの方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
次のようにコードをコピーします。
<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は、Sina Weibo検索ボックスに似た効果を模倣します</title>
<style type = "text/css">
* {パディング：0;マージン：0;}
ボディ{font-size：14px; }
#box {width：600px;マージン：40px auto;}
#in {width：240px;高さ：24px;ラインハイト：24px;国境：1pxソリッドボーダーラジウス：4px; Box-Shadow：Inset 0 0 2px; }
#suggest {display：none;位置：相対;マージントップ：-1px;幅：240px;パディングトップ：1px;国境：1pxソリッドボーダートップ：0なし;
ボーダーラジウス：4px; Box-Shadow：Inset 0 0 2px;オーバーフロー：隠し; }
#suggest a {display：block;色：＃f00;高さ：24px;ラインハイト：24px;テキスト装置：なし;パディング：0 4px;}
＃Suggest A：Hover {background：#eee;}
＃スパン{色＃369;}
</style>
<script type = "text/javascript">
window.onload = function（）{
//以下で使用するために多数の変数を宣言します
var obox = document.getElementById（ "box"）;
obj = document.getElementById（ "in"）;
osug = document.getElementById（ "spress"）;
oa = osug.getelementsbytagname（ "span"）;
// IEおよびFirefoxブラウザーと互換性がありますが、テスト後、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 <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;
}
}
}
}
関数disbox（）{
document.getElementById（ "suggent"）。style.display = "none";
}
</script>
</head>
<body>
<dl id = "box">
<dt> <入力onblur = "disbox（）" type = "text" name = "" id = "in" /> < /dt>
<dd id = "prossisk">
<a href = "###">「<span> </span>」に関連するWeibo </a>を検索します
<a href = "###">「<span> </span>」関連ユーザーを検索</a>
</dd>
</dl>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。