توضح هذه المقالة الطريقة العملية للنقر فوق مربع الإدخال لإيقاف مربع التحديد في JS+CSS. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> JS+CSS ينشئ عملية إدخال مربع الإدخال المنبثقة العملية </title>
<type type = "text/css">
.black_overlay {display: none ؛ الموضع: المطلق ؛ الأعلى: 0 ٪ ؛ اليسار: 0 ٪ ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ ؛ لون الخلفية: #fffff ؛ z-index: 1001 ؛ -Moz-opacity: 0.8 ؛ عتامة: .80 ؛ مرشح: ألفا (الثبات = 80) ؛}
. white_content {display: none ؛ الموضع: المطلق ؛ الأعلى: 25 ٪ ؛ اليسار: 25 ٪ ؛ العرض: 50 ٪ ؛ الارتفاع: 50 ٪ ؛ الحشو: 16px ؛ الحدود: 16 بكسل صلبة برتقالية ؛ الهامش: -32 بكسل ؛ لون الخلفية: أبيض ؛ z-index: 1002 ؛ تدفق أوتوم ؛}
</style>
<script language = "javaScript" type = "text/javaScript">
وظيفة moveselect (OBJ ، الهدف ، الكل) {
إذا (! الكل) الكل = 0
if (obj! = "[object]") obj = eval ("document.all."+obj)
Target = eval ("document.all."+Target)
إذا (الكل == 0)
{
بينما (obj.selectedIndex> -1) {
//alert(oBJ.SelectedIndex)
mot = obj.options [obj.selectedIndex] .Text
mov = obj.options [obj.selectedIndex]. value
Obj.Remove (Obj.SelectedIndex)
var newoption = document.createElement ("Option") ؛
newoption.text = mot
newoption.value = mov
Target.Add (newoption)
}
}
آخر
{
//alert(oBj.options.length)
لـ (i = 0 ؛ i <obj.length ؛ i ++)
{
mot = obj.options [i] .text
mov = obj.options [i]. value
var newoption = document.createElement ("Option") ؛
newoption.text = mot
newoption.value = mov
Target.Add (newoption)
}
obj.options.length = 0
}
}
وظيفة داكاي () {
document.getElementById ('light'). style.display = 'block' ؛
document.getElementById ('fade'). style.display = 'block'
}
وظيفة guanbi () {
// تمرير قيمة تحديد على مربع النص إلى اليمين
var yuangong = document.getElementByid ("Yuangong")
yuangong.value = "" // إذا لم تتم إضافة هذه الجملة ، ستتم إضافة نتيجة كل اختيار.
var huoque = document.getElementById ("D2")
لـ (var k = 0 ؛ k <huoqu.length ؛ k ++)
yuangong.value = yuangong.value + huoqu.options [k] .value + "" // "" الوسط هو مساحة ، فاصل حرف ، والذي يمكن تغييره إلى آخر
document.getElementById ('light'). style.display = 'none' ؛
document.getElementById ('fade'). style.display = 'none'
}
</script>
</head>
<body>
<type type = "text" id = "yuangong" onClick = "dakai ()" size = "50">
<div id = "light">
<table id = "table4" borderColor = "#cccccc" borderColordark = "#cccccc" porderColorlight = "#fffff" cellpadding = "3" cellpacing = "0">
<tr>
<td align = "center" valign = "middle">
الموظفين في هذا القسم
<select size = "12" name = "d1" ondblclick = "moveselect (this ، 'd2')" mostmo = "multible">
<Option Value = "Zhang San"> Zhang San </Option>
<Option Value = "li si"> li si </portic>
<Option Value = "Xiao Wang"> Xiao Wang </Option>
</select>
</td>
<td align = "center" valign = "middle">
<type type = "button" value = "<<" name = "b3" onClick = "MovesElect ('d2' ، 'd1' ، 1)"> <br>
<type type = "button" value = "<" name = "b5" onClick = "MovesElect ('d2' ، 'd1')"> <br>
<type type = "button" value = ">" name = "b6" onClick = "MovesElect ('D1' ، 'D2')"> <br>
<type type = "button" value = ">>" name = "b4" onClick = "MovesElect ('D1' ، 'D2' ، 1)"> <br>
</td>
<td align = "center" valign = "middle">
الموظفون في انتظار تقسيم الإدارات
<select size = "12" name = "d2" id = "d2" ondblclick = "moveselect (this ، 'd1')" multives = "multible">
<value Option = "الموظف x"> الموظف x </soph>
<value Option = "صاحب العمل y"> صاحب العمل y </port
</select>
</td>
</r>
</table>
<a href = "javaScript: void (0)" onClick = "Guanbi ()"> تأكيد </a>
<type type = "button" name = "button" onClick = "Guanbi ()" value = "Button يمكن أيضًا تأكيد">>
</div>
<div id = "fade"> </viv>
</body>
</html>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.