In diesem Artikel wird die Methode von JS+CSS beschrieben, um das Sensuchfeld Sina Weibo zu implementieren. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <! 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">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<titels> JS+CSS ahmt den Effekt ähnlich wie Sina Weibo Suchbox </title> ähnlich
<style type = "text/css">
* {Padding: 0; Rand: 0;}
Körper {Schriftgröße: 14px; }
#box {width: 600px; Rand: 40px Auto;}
#in {width: 240px; Höhe: 24px; Zeilenhöhe: 24px; Grenze: 1PX fester Grenzradius: 4px; Box-Shadow: Einschub 0 0 2px; }
#Suggest {display: Keine; Position: Relativ; Rand: -1px; Breite: 240px; Padding-Top: 1PX; Grenze: 1px Feste Grenztop: 0 Keine;
Border-Radius: 4px; Box-Shadow: Einschub 0 0 2px; Überlauf: versteckt; }
#Suggest a {display: block; Farbe:#f00; Höhe: 24px; Zeilenhöhe: 24px; Textdekoration: Keine; Polsterung: 0 4px;}
#Suggest a: Hover {Hintergrund: #eee;}
#Suggest a span {color#369;}
</style>
<script type = "text/javaScript">
window.onload = function () {
// deklarieren Sie eine Reihe von Variablen für die Verwendung unten
var obox = document.getElementById ("Box");
obj = document.getElementById ("in");
osug = document.getElementById ("sugge");
oa = osug.getElementsByTagName ("span");
// kompatibel mit IE und Firefox -Browsern, aber nach dem Test wurde festgestellt, dass IE678 IE9 sein kann, aber beim Löschen nicht ausgelöst werden kann. Ich habe online überprüft und gesagt, dass es ein Problem mit IE9 gibt.
obj.oninput = obj.onpropertychange = onchange;
Funktion onchange () {
var txt = this.Value;
var words = txt.length;
if (Words == 0) {
Osug.Style.display = "Keine";
} else if (Words <= 8) {
Osug.Style.display = "Block";
für (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)+"...";
für (var i = 0; len = oa.length, i <len; i ++) {
oa [i] .innerhtml = limit;
}
}
}
}
Funktion destoximal () {
document.getElementById ("sugge"). style.display = "Keine";
}
</script>
</head>
<body>
<dl id = "box">
<dt> <Eingabe onblur = "disbox ()" type = "text" name = "" id = "in" /> < /dt>
<dd id = "sugge">
<a href = "###"> Suche nach "<span> </span>" verwandte Weibo </a>
<a href = "###"> Suche nach "<span> </span>" Verwandte Benutzer </a>
</dd>
</dl>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.