في بعض الأحيان ، نحتاج إلى مربع منسد اختياري لتحديد المحتوى ، ولكن هناك أيضًا الحاجة إلى تخصيص الإدخال. لهذا المطلب ، تستخدم معظم مواقع الويب مربعًا منسولًا ونصًا إدخالًا ، وإعطاء اختيارات بالتوازي أو الفرع. لذلك ، نريد أن يبدو وكأنه مربع منسد يمكن إدخاله أو اختياره ، فكيف نفعل ذلك؟
في الواقع ، يمكننا محاكاة هذا التأثير من خلال تحديد موقع CSS ورمز JavaScript الصغير.
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<title> قابلة للتحرير وقابل للاختيار منسقلة </title>
<meta charset = "utf-8">
<style>
.list-name-input {
اللون: #333 ؛
Font-Family: Tahoma ، "Microsoft Yahei" ، "Segoe UI" ، Arial ، "Microsoft Yahei" ، Simsun ، Sans-Serif ؛
حجم الخط: 15 بكسل ؛
خط الرصيف: جريئة ؛
الارتفاع: 50 بكسل ؛
الهامش: 0px ؛
الحشو: 0px ؛
الموقف: قريب
العرض: 530 بكسل ؛
}
.list-name-for-select {
الحدود: 0 ؛
اللون: #555 ؛
الارتفاع: 20 بكسل ؛
لون الإضاءة: RGB (255 ، 255 ، 255) ؛
رفع الخط: 20 بكسل ؛
الهامش: 0 0 10px 0 ؛
الخطوط العريضة اللون: #555 ؛
المخطط العائد: 0px ؛
أسلوب الخطوط العريضة: لا شيء ؛
عرض الخطوط العريضة: 0px ؛
الحشو: 4px 6px ؛
الموقف: مطلق ؛
أعلى: 1 بكسل ؛
اليسار: 3px ؛
المحاذاة الرأسية: الأوسط ؛
العرض: 486 بكسل ؛
}
.list-name-input-for-select: Focus {
الحدود: 0 ؛
الحدود الراديوس: 0 ؛
}
.list-select {
خلفية اللون: #fff ؛
الحدود: 1px #ccc الصلبة ؛
الحدود الحدودية: 4px ؛
اللون: #555 ؛
المؤشر: مؤشر.
الارتفاع: 30 بكسل ؛
اليسار: 0px ؛
الهامش: 0 0 10px 0 ؛
الحشو: 4px 6px ؛
الموقف: مطلق ؛
أعلى: 0px ؛
المحاذاة الرأسية: الأوسط ؛
الفضاء الأبيض: قبل ؛
العرض: 530 بكسل ؛
}
</style>
</head>
<body>
<div id = "list-name-input">
<حدد type = "text" id = "list-select">
<خيار القيمة = "">
جديد
</point>
<value Option = "0">
10-NGCFG-update-1000
</point>
<خيار القيمة = "1">
11-NGCFG-update-1000
</point>
<خيار القيمة = "2">
111
</point>
<value Option = "3">
12-NGCFG-update-1000
</point>
<value Option = "4">
13-NGCFG-update-1000
</point>
<value Option = "5">
14-NGCFG-update-1000
</point>
<value Option = "6">
15-NGCFG-update-1000
</point>
<value Option = "7">
16-NGCFG-update-1000
</point>
<خيار القيمة = "8">
17-NGCFG-update-1000
</point>
<value Option = "9">
18-NGCFG-update-1257
</point>
<value Option = "10">
2-NGCFG-update-100
</point>
<value Option = "11">
3-NGCFG-update-150
</point>
<خيار القيمة = "12">
4-NGCFG-UPDATE-200
</point>
<value Option = "13">
5-NGCG-UPDATE-250
</point>
<value Option = "14">
6-NGCFG-update-418
</point>
<value Option = "15">
7-NGCFG-update-500
</point>
<value Option = "16">
8-NGCFG-update-1000
</point>
<value Option = "17">
9-NGCFG-update-1000
</point>
<value Option = "18">
@الجميع
</point>
<value Option = "19">
@CNC-BJ-4
</point>
<value Option = "20">
CNC-BJ-اختبار
</point>
<value Option = "21">
امتحان
</point>
</select>
<type type = "text" id = "list-name-for-select">
</div>
<script>
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>