Cet article décrit la méthode de JS + CSS pour implémenter la zone de recherche SINA Weibo. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! 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">
<adal>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Title> JS + CSS imite l'effet similaire à la boîte de recherche Sina Weibo </TITAL>
<style type = "text / css">
* {rembourrage: 0; marge: 0;}
corps {taille de police: 14px; }
#box {largeur: 600px; marge: 40px auto;}
#in {largeur: 240px; hauteur: 24px; hauteur de ligne: 24px; Border: 1px Border-Radius solide: 4px; Box-shadow: insert 0 0 2px; }
#Suggest {affichage: aucun; Position: relative; marge: -1px; Largeur: 240px; Tableau de rembourrage: 1px; Border: 1px Border-Top Solid: 0 Aucun;
Border-Radius: 4px; Box-shadow: insert 0 0 2px; débordement: caché; }
#Suggest a {affichage: bloc; Couleur: # F00; hauteur: 24px; hauteur de ligne: 24px; Décoration du texte: aucune; rembourrage: 0 4px;}
#suggest A: Hover {background: #eee;}
#suggest une portée {couleur # 369;}
</ style>
<script type = "text / javascript">
window.onload = function () {
// déclare un tas de variables à utiliser ci-dessous
var obox = document.getElementById ("box");
obj = document.getElementById ("in");
OSUG = document.getElementById ("suggère");
OA = OSUG.getElementsByTagName ("Span");
// compatible avec les navigateurs IE et Firefox, mais après les tests, il a été constaté que IE678 peut être IE9 mais ne peut pas être déclenché lorsqu'il est supprimé. J'ai vérifié en ligne et j'ai dit qu'il y avait un problème avec IE9.
obj.oninput = obj.onpropertychange = onchange;
fonction onchange () {
var txt = this.value;
var words = txt.length;
if (mots == 0) {
OSUG.STYLE.DISPlay = "Aucun";
} else if (mots <= 8) {
OSUG.STYLE.DISPlay = "Block";
pour (var i = 0; len = oa.length, i <len; i ++) {
oa [i] .innerHtml = txt;
}
} else if (mots> 8) {
OSUG.STYLE.DISPlay = "Block";
var limit = txt.substring (0,8) + "...";
pour (var i = 0; len = oa.length, i <len; i ++) {
oa [i] .InnerHtml = limite;
}
}
}
}
function disox () {
document.getElementById ("suggère"). style.display = "Aucun";
}
</cript>
</ head>
<body>
<dl id = "box">
<dt> <entrée onblur = "disox ()" type = "text" name = "" id = "in" /> </dt>
<dd id = "suggère">
<a href = "###"> Rechercher "<span> </span>" Weibo connexe </a>
<a href = "###"> Rechercher "<span> </span>" Utilisateurs associés </a>
</dd>
</dl>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.