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> - <
<ประเภทอินพุต = ส่งชื่อ = ส่ง>