การสอนการผลิตเว็บเพจ: สรุปทักษะกล่องอินพุต

wulin.com (www.vevb.com) บทความบทนำ: รูปแบบต่าง ๆ ของกล่องอินพุตอินพุต

พื้นหลังเฟรมอินพุตมีความโปร่งใส:

<อินพุต style = พื้นหลัง: โปร่งใส; เส้นขอบ: 1px solid #ffffff>

เมาส์จะผ่านกล่องอินพุตและสีพื้นหลังของกล่องอินพุตเปลี่ยน:

<ค่าอินพุต = พิมพ์ที่นี่ชื่อ = user_pass type = ขนาดข้อความ = 29 onMouseOver = this.style.borderColor = 'black'; this.style.backgroundColor = 'plum'

สไตล์ = ความกว้าง: 106; ความสูง: 21

onMouseOut = this.style.borderColor = 'black'; this.style.backgroundColor = '#ffffff' สไตล์ = ความกว้างของชายแดน: 1px; เส้นขอบสี = สีดำ>

เมื่อป้อนคำศัพท์เส้นขอบกล่องอินพุตจะกะพริบ (เส้นขอบเป็นสี่เหลี่ยมจัตุรัสเล็ก):

<ภาษาสคริปต์ = JavaScript>

ฟังก์ชั่น BorderColor () {

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

self ['otext']. style.borderColor = 'Yellow';

}อื่น{

self ['otext']. style.BorderColor = 'RED';

-

otime = settimeout ('bordercolor ()', 400);

-

</script>

<ประเภทอินพุต = ข้อความ ID = otext style = border: 5px Dotted สีแดง; สี: onfocus สีแดง = bordercolor (นี่); onblur = cleartimeout (otime);>

เมื่อป้อนคำชายแดนของกล่องอินพุตกะพริบ (เส้นขอบเป็นเส้นประ):

<style>

#otext {Border: 1px Dotted #ff0000; Ryo: Expression (onfocus = ฟังก์ชั่นไฟ () {พร้อม (document.all.otext) {style.borderColor = (style.borderColor ==#ffee00?#ff0000:#ffee00); timer = settimeout (แสง, 500);}}, onblur = function ()

</style>

<อินพุตประเภท = ข้อความ ID = otext>

กล่องอินพุตส่วนขยายแนวนอนอัตโนมัติ:

<ประเภทอินพุต = สไตล์ข้อความ = huerreson: นิพจน์ (this.width = this.scrollWidth) ค่า = abcdefghijk>

ขยายกล่องข้อความลงโดยอัตโนมัติ:

<textarea name = แถวเนื้อหา = 6 cols = 80 onPropertyChange = ถ้า (this.scrollheight> 80) this.style.posheight = this.scrollheight+5> ลองป้อนอินพุตสองสามรายการ </textarea>

กล่องข้อความที่ขีดเส้นใต้เท่านั้น:

<อินพุต style = border: 0; ขอบด้านล่าง: 1 Solid Black; พื้นหลัง:;>;

กล่องป้อนหมายเลขซีเรียลซอฟต์แวร์:

<script for = t event = onkeyup>

if (value.length == 3) document.all [event.srcelement.sourceIndex+1] .Select ();

</script>

<ชื่ออินพุต = t ขนาด = 5 maxLength = 3> - <ชื่ออินพุต = t size = 5 maxLength = 3> - <ชื่ออินพุต = t ขนาด = 5 maxLength = 3> - <ชื่ออินพุต = t ขนาด = 5 maxLength = 3> - <อินพุตชื่อ = t ขนาด = 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 = subment event = onclick>

var sn = new Array ();

สำหรับ (i = 0; i <t.length; i ++)

sn = t.value;

การแจ้งเตือน (sn.join ( -));

</script>

<ชื่ออินพุต = t ขนาด = 5 maxLength = 3> - <ชื่ออินพุต = t size = 5 maxLength = 3> - <ชื่ออินพุต = t ขนาด = 5 maxLength = 3> - <ชื่ออินพุต = t ขนาด = 5 maxLength = 3> - <อินพุตชื่อ = t ขนาด = 5 maxLength = 3> - <

<ประเภทอินพุต = ส่งชื่อ = ส่ง>