Artikel ini telah membagikan efek khusus dari halaman web kotak input teks JS khusus untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Contoh 1: Biarkan kotak teks hanya menggarisbawahi
<script type = "text/javascript"> function changeTextStyle () {// Biarkan kotak teks hanya memiliki underscore // dapatkan kotak teks dom var mytext = document.geteLementById ("myText"); mytext.style.bordercolor = 'hitam'; // atur warna perbatasan mytext.style.borderstyle = 'solid'; // Atur gaya perbatasan ke garis solid mytext.style.borderwidth = '0 0 1px 0'; // Atur ukuran perbatasan, 0 berarti tidak} </script>Contoh 2: Surat pertama atau semua huruf kapitalisasi
<script type = "text/javascript"> // format fungsi verifikasi validateInput () {// Dapatkan dom dari kotak teks var myText1 = document.getElementById ("myText1"); var myText2 = document.getElementById ("myText2"); var val1 = mytext1.value; // nilai kotak teks 1 var val2 = myText2.value; // nilai kotak teks 2 var errmsg = ''; // Tentukan Karakter Prompt Kesalahan // Pertahankan apakah itu dimulai dengan huruf kapital jika (val1! = '' && (val1.charat (0)> 'z' || val1.charat (0) <'a')) {// split kesalahan karakter errmsg = 'huruf pertama kotak teks 1 perlu dikapitalisasi/n'; peringatan (errmsg); } if (val2! = '' &&! // b [az]+/b/.test (val2)) {// split kesalahan karakter errmsg = 'huruf pertama kotak teks 2 harus dikapitalisasi/n'; peringatan (errmsg); }} </script>Contoh 3: Kotak teks yang hanya bisa memasukkan angka
<script type = "text/javaScript"> // format fungsi verifikasi validateInput () {// Dapatkan dom dari kotak teks var myText = document.getElementById ("myText"); var val = myText.Value; // Dapatkan nilai yang dimasukkan oleh pengguna jika (! // b [0-9]+/b/.test (val)) {// Gunakan peringatan verifikasi reguler ('hanya masukkan angka'); // Tip Kesalahan Pesan}} </script>Contoh 4: Verifikasi format email dengan ekspresi reguler
<script type = "text/javaScript"> // format fungsi verifikasi validateInput () {// Dapatkan dom dari kotak teks var myText = document.getElementById ("myText"); var email = myText.Value; // Dapatkan input email oleh pengguna // Tentukan ekspresi reguler var emailReg = /^ obat-za-z0-9_- $ )+@(öa-za-z0-9_- media)+(/.hta-za-z0-9_-ubungi {2,3 --) {1.2 --)$/; if (email reg.test (email)) {// menilai apakah itu memenuhi peringatan persyaratan format ("Sertifikasi dilewati, pengajuan diizinkan"); // pass} else {alert ("Periksa gagal, silakan periksa untuk masuk kembali"); // Verifikasi Gagal}}} </script>Contoh 5: Hapus konten kotak teks saat menjadi fokus
<script type = "text/javaScript"> // CLEAR Content Function clearContent (myText) {myText.value = ''; // Atur nilai konten teks ke karakter nol} </script> <input type = "text" value = "" onFocus = "clearContent (this)"/>Contoh 6: Setelah pengguna segera memasuki pemeriksaan format
<script type = "text/javascript"> function validateTeL () {// Verifikasi format // Dapatkan DOM kotak teks var mytel = document.getElementById ("mytel"); var val = mytel.value; // Dapatkan nilai yang dimasukkan oleh pengguna jika (! // b [0-9]+/b/.test (val)) {// Gunakan peringatan verifikasi reguler ('hanya masukkan angka'); // pesan kesalahan prompt // ubah gaya, tarik perhatian mytel.style.border = '1px solid red'; } else if (val.length! = 11) {// panjang harus 11-bit alert ('Nomor ponsel adalah 11-bit'); // Jawab pesan kesalahan // Ubah gaya untuk menarik perhatian mytel.style.border = '1px solid red'; } else {// Ubah gaya untuk menunjukkan bahwa mytel.style.border = '1px solid green'; Kembali Benar; }} </script> <input type = "text" value = "" id = "mytel" oNblur = "validateTel ()"/>Contoh 7: Perbatasan kotak teks berkedip saat memasukkan teks
Yang terbaik adalah menulis OnFocus () dan Onblur () berpasangan!
<script type = "text/javascript"> // inisialisasi fungsi fungsi init () {// Dapatkan semua teks dom var texts = document.geteLementsbyTagname ('input'); // Transfer semua kotak teks untuk (var i = 0; i <texts.length; i ++) {var t = teks [i]; // kotak teks saat ini var timer; // Pengawas Fokus Event T.onfocus = function () {var e = this; // mempertahankan referensi dari dom saat ini // timer yang mulai flash = setInterval (function () {// Dapatkan variabel warna perbatasan saat ini var c = e.style.bordercolor; if (c == 'yellow') {// jika itu adalah yellow. warna} else {// jika tidak, perbatasan menjadi kuning E.Style.BordERColor = 'yellow'; t.onblur = function () {// berbicara untuk acara cuti // mengembalikan warna perbatasan t.style.bordercolor = ''; clearInterval (timer); // CLEAR TIMER}}}} </script> <body style = "text-align: center;" onload = "init ();">Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.