Wulin.com (www.vevb.com) Artikel Pendahuluan: Berbagai gaya kotak input input.
Latar belakang bingkai input transparan:
<Input style = latar belakang: transparan; perbatasan: 1px solid #ffffff>
Mouse melewati kotak input, dan warna latar belakang kotak input berubah:
<Input value = ketik di sini name = user_pass type = ukuran teks = 29 onmouseover = this.style.bordercolor = 'black'; this.style.backgroundcolor = 'plum'
Style = Width: 106; Tinggi: 21
onmouseout = this.style.bordercolor = 'black'; this.style.backgroundColor = '#ffffff' style = border-width: 1px; border-color = black>
Saat memasuki sebuah kata, perbatasan kotak input berkedip (perbatasan adalah kotak kecil):
<Bahasa skrip = javascript>
function bordercolor () {
if (self ['otext']. style.bordercolor == 'red') {
self ['Otext']. style.bordercolor = 'yellow';
}kalau tidak{
self ['Otext']. style.bordercolor = 'red';
}
OTIME = setTimeout ('BorderColor ()', 400);
}
</script>
<Input Type = Text ID = Otext Style = Border: 5px Dotted Red; Color: Red Onfocus = BorderColor (This); Onblur = ClearTimeout (OTIME);>
Saat memasuki sebuah kata, batas kotak input berkedip (perbatasan adalah garis putus -putus):
<tyle>
#otext {border: 1px bertitik #ff0000; ryo: ekspresi (onfocus = lampu fungsi ) {with (document.all.otext) {style.bordercolor = (style.bordercolor ==#ffee00?#ff0000:#ffee00); timer = setTimeout (Light, 500);}}, onblur = function () {this.style.bordercolor =#ff0000;
</tyle>
<Input Tipe = Text ID = Otext>
Kotak Input Ekstensi Horizontal Otomatis:
<input type = Text style = huerreson: ekspresi (this.width = this.scrollwidth) value = abcdefghijk>
Secara otomatis memanjang kotak teks ke bawah:
<TextAreA Name = Baris Konten = 6 Cols = 80 onPropertyChange = if (this.scrollHeight> 80) this.style.posheight = this.scrollHeight+5> Coba masukkan beberapa input </textAreA>
Hanya kotak teks yang digarisbawahi:
<Input Style = Border: 0; Border-Bottom: 1 Solid Black; Latar Belakang:;>
Kotak Input Nomor Seri Perangkat Lunak:
<skrip untuk = t event = onkeyup>
if (value.length == 3) document.all [event.srcelement.sourceIndex+1] .select ();
</script>
<input name = t ukuran = 5 maxlength = 3> - <input name = t ukuran = 5 maxlength = 3> - <input name = t ukuran = 5 maxlength = 3> - <input name = t ukuran = 5 maxlength = 3> - <input name = t ukuran = 5 max = 3> - <input name = t7 size = 5 maxlength = 3
Kotak Input Nomor Seri Perangkat Lunak (Versi Lengkap):
<skrip untuk = t event = onkeyup> if (value.length == maxlength) document.all [event.srcelement.sourceIndex+1] .focus (); </script>
<Script for = t event = onFocus> select (); </script>
<skrip untuk = Kirim Event = OnClick>
var sn = array baru ();
untuk (i = 0; i <t.length; i ++)
sn = t.value;
peringatan (sn.join ( -));
</script>
<input name = t ukuran = 5 maxlength = 3> - <input name = t ukuran = 5 maxlength = 3> - <input name = t ukuran = 5 maxlength = 3> - <input name = t ukuran = 5 maxlength = 3> - <input name = t ukuran = 5 max = 3> - <input name = t ukuran = 5 maxlength = 3>
<Input Type = Kirim Nama = Kirim>