В этой статье описывается метод JS+CSS для реализации поля поиска Sina Weibo. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
Скопируйте код следующим образом: <! 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">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> JS+CSS подражает эффекту, аналогичному Sina Weibo Box </title>
<стиль типа = "text/css">
* {Padding: 0; поля: 0;}
Body {font-size: 14px; }
#box {ширина: 600px; Полевая: 40px Auto;}
#in {ширина: 240px; Высота: 24px; высота линии: 24px; Граница: 1px твердое границу-радиус: 4px; Box-Shadow: вставка 0 0 2px; }
#suggest {display: none; позиция: относительно; маржинальная версия: -1px; Ширина: 240px; надоеволок: 1PX; Граница: 1PX Сплошная граница: 0 Нет;
граница-радий: 4px; Box-Shadow: вставка 0 0 2px; переполнение: скрыто; }
#suggest a {display: block; Цвет:#F00; Высота: 24px; высота линии: 24px; Текстовое декорация: нет; Надо: 0 4px;}
#suggest a: Hover {founale: #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 ("Предложить");
oa = osug.getelementsbytagname ("span");
// Совместим с IE и Firefox браузерами, но после тестирования было обнаружено, что IE678 может быть IE9, но не может быть запускается при удалении. Я проверил онлайн и сказал, что есть проблема с IE9.
obj.oninput = obj.onpropertychange = onchange;
функция onchange () {
var txt = this.value;
var words = txt.length;
if (слова == 0) {
osug.style.display = "none";
} else if (слова <= 8) {
osug.style.display = "block";
for (var i = 0; len = oa.length, i <len; i ++) {
oa [i] .innerhtml = txt;
}
} else if (слова> 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 ("Предложить"). style.display = "none";
}
</script>
</head>
<тело>
<dl id = "box">
<dt> <input onblur = "disbox ()" type = "text" name = "" id = "in" /> < /dt>
<dd id = "Предложить">
<a href = "###"> Поиск "<pran> </span>" weibo </a>
<a href = "###"> Поиск "<pran> </span>", связанные с пользователями </a>
</dd>
</dl>
</body>
</html>
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.