Иногда нам нужна дополнительная раскрывающаяся поле для выбора контента, но есть также необходимость настраивать ввод. Для этого требования большинство веб-сайтов используют выпадающую коробку и входной текст и дают выбор параллельно или ветви. Итак, мы хотим, чтобы это выглядело как раскрывающаяся коробка, которую можно ввести или выбрать, так как же мы это сделаем?
На самом деле, мы можем имитировать этот эффект с помощью позиционирования CSS и небольшого кода JavaScript.
Кода -копия выглядит следующим образом:
<! Doctype html>
<html>
<голова>
<TILE> Редактируемый и выбираемый раскрывающееся поле </title>
<meta charset = "utf-8">
<style>
.list-name-input {
Цвет: #333;
Семейство Font: Tahoma, «Microsoft Yahei», «Segoe UI», Arial, «Microsoft Yahei», Simsun, Sans-Serif;
размер шрифта: 15px;
шрифт-вес: жирный шрифт;
Высота: 50px;
поля: 0px;
Заполнение: 0px;
позиция: относительно;
Ширина: 530px;
}
.list-name-for-select {
граница: 0;
Цвет: #555;
Высота: 20px;
осветительный цвет: RGB (255, 255, 255);
высота линии: 20px;
Полевая: 0 0 10px 0;
КОРИНАЛЬНЫЙ КОЛОН: #555;
Сброс выключения: 0PX;
Схема в схеме: нет;
Схема ширины: 0PX;
Заполнение: 4px 6px;
позиция: абсолютно;
Верх: 1px;
Слева: 3PX;
Вертикальная атака: средняя;
Ширина: 486px;
}
.list-name-input-for-select: Focus {
граница: 0;
граница-радий: 0;
}
.list-select {
фоновый цвет: #fff;
Граница: 1px #ccc твердый;
граница-радий: 4px;
Цвет: #555;
курсор: указатель;
Высота: 30px;
слева: 0px;
Полевая: 0 0 10px 0;
Заполнение: 4px 6px;
позиция: абсолютно;
Верх: 0px;
Вертикальная атака: средняя;
Белое пространство: pre;
Ширина: 530px;
}
</style>
</head>
<тело>
<div id = "list-input">
<select type = "text" id = "sictectect">
<option value = "">
Новый
</option>
<vitue value = "0">
10-ngcfg-update-1000
</option>
<значение опции = "1">
11-ngcfg-update-1000
</option>
<vition value = "2">
111
</option>
<option value = "3">
12-ngcfg-update-1000
</option>
<vition value = "4">
13-ngcfg-update-1000
</option>
<vitor value = "5">
14-ngcfg-update-1000
</option>
<vition value = "6">
15-ngcfg-update-1000
</option>
<vition value = "7">
16-ngcfg-update-1000
</option>
<vition value = "8">
17-ngcfg-update-1000
</option>
<vitor value = "9">
18-ngcfg-update-1257
</option>
<vition value = "10">
2-ngcfg-update-100
</option>
<vition value = "11">
3-ngcfg-update-150
</option>
<vition value = "12">
4-ngcfg-update-200
</option>
<vitor value = "13">
5-ngcg-update-250
</option>
<vitor value = "14">
6-ngcfg-update-418
</option>
<vitor value = "15">
7-ngcfg-update-500
</option>
<vition value = "16">
8-ngcfg-update-1000
</option>
<vitor value = "17">
9-ngcfg-update-1000
</option>
<опция значение = "18">
@ВСЕ
</option>
<vitor value = "19">
@CNC-BJ-4
</option>
<vitor value = "20">
CNC-BJ-Тест
</option>
<vitor value = "21">
тест
</option>
</select>
<input type = "text" id = "list-name-for-select">
</div>
<Скрипт>
var ListName = document.getElementById ('list-name-for-select');
var listselect = document.getElementById ('List-Select'). OnChange = function (e) {
console.log (это)
if (this.value) {
listName.value = this.value + '| ' + this.options [this.selectedIndex] .Text;
}еще{
ListName.value = ''
}
};
</script>
</body>
</html>