برنامج إنتاج صفحة الويب البرنامج التعليمي: ملخص لمهارات مربع الإدخال

wulin.com (www.vevb.com) مقالة مقدمة: أنماط مختلفة من صناديق الإدخال.

خلفية إطار الإدخال شفافة:

<نمط الإدخال = الخلفية: شفاف ؛ الحدود: 1 بكسل Solid #FFFFFF>

يمر الماوس عبر مربع الإدخال ، ويتغير لون خلفية مربع الإدخال:

<قيمة الإدخال = اكتب here name = user_pass type = size text = 29 onMouseover = this.style.borderColor = 'Black' ؛ this.style.backgroundColor = 'plum'

النمط = العرض: 106 ؛ الارتفاع: 21

onMouseout = this.style.bordercolor = 'black' ؛ this.style.backgroundColor = '#ffffff' style = width الحدود: 1px ؛ border-color = black>

عند إدخال كلمة ، تومض حدود صندوق الإدخال (الحدود مربعة صغيرة):

<لغة البرنامج النصي = javaScript>

وظيفة الحدود () {

if (self ['otext']. style.borderColor == 'Red') {

الذات ['otext']. style.borderColor = 'Yellow' ؛

}آخر{

الذات ['otext']. style.borderColor = 'Red' ؛

}

otime = setTimeOut ('BorderColor ()' ، 400) ؛

}

</script>

<type type = text id = otext style = الحدود: 5px منتشرة باللون الأحمر ؛ اللون: Red onfocus = borderColor (this) ؛ onblur = cleartimeout (otime) ؛>

عند إدخال كلمة ، تومض حدود مربع الإدخال (الحدود هي خط منقط):

<style>

#otext {الحدود: 1px منقط #ff0000 ؛ rio: التعبير (onfocus = ضوء الوظيفة () {with (document.all.otext) {style.bordercolor = (style.bordercolor ==#ffee00؟#ff0000:#ffee00) ؛ timer = setTimeout (light ، 500) ؛}} ، onblur = function () {style.bordercolor =#ff0000 ؛

</style>

<نوع الإدخال = معرف النص = otext>

مربع إدخال التمديد الأفقي التلقائي:

<نوع الإدخال = نمط النص = huerreson: التعبير (this.width = this.scrollwidth) value = abcdefghijk>

تمديد مربع النص لأسفل تلقائيًا:

<textarea name = Content Rows = 6 cols = 80 OnPropertyChange = if (this.scrollheight> 80) this.style.posheight = this.scrollheight+5> حاول إدخال بعض المدخلات </textarea>

مربعات النص المسطحة فقط:

<نمط الإدخال = الحدود: 0 ؛ الحدود القاع: 1 أسود صلب ؛ الخلفية: ؛>

مربع إدخال الرقم التسلسلي للبرامج:

<script for = t event = onKeyup>

if (value.length == 3) document.all [event.srcelement.SourceIndex+1] .select () ؛

</script>

<name input = t size = 5 maxLength = 3> - <input name = t size = 5 maxLength = 3> - <input name = t size = 5 maxLength = 3> - <input name = t size = 5 maxLength = 3> - <input name = t size = 5 maxLength = 3>

مربع إدخال الرقم التسلسلي للبرامج (الإصدار الكامل):

<script for = t event = onKeyup> if (value.length == maxLength) document.all [event.srcelement.sourceIndex+1] .focus () ؛ </script>

<script for = t event = onfocus> select () ؛ </script>

<script for = prid event = onClick>

var sn = new array () ؛

لـ (i = 0 ؛ i <t.length ؛ i ++)

sn = t.value ؛

تنبيه (sn.join ( -)) ؛

</script>

<name input = t size = 5 maxLength = 3> - <input name = t size = 5 maxLength = 3> - <input name = t size = 5 maxLength = 3> - <input name = t size = 5 maxLength = 3> - <input name = t size = 5 maxLength = 3> - <input name = t size = 5 maxlenge = 3>

<نوع الإدخال = إرسال اسم = إرسال>