Cara Membuat Pemilih Nomor Telepon Sederhana
Nomor telepon, selain nama dan email, adalah informasi kontak yang paling sering digunakan dalam formulir online. Bidang nomor telepon biasanya dirancang sedemikian rupa sehingga mengharuskan pengguna untuk mengetik angka dalam menggunakan keyboard mereka. Metode ini sering menghasilkan input data yang tidak akurat.
Untuk mengurangi kesalahan input pengguna dan meningkatkan pengalaman pengguna situs Anda, Anda dapat membuat GUI yang memungkinkan pengguna untuk dengan cepat memasukkan nomor telepon mereka, dengan cara yang mirip dengan pemilih tanggal.
Dalam tutorial ini, Anda akan melihat caranya tambahkan pemilih nomor telepon sederhana ke bidang input. Kami akan menggunakan HTML5, CSS3, dan JavaScript untuk sampai ke GUI yang dapat Anda lihat dan uji dalam demo di bawah ini. Kami juga akan menggunakan ekspresi reguler untuk memastikan pengguna benar-benar memasukkan nomor telepon yang valid.
1. Buat Bidang Nomor Telepon
Pertama, buat bidang input dengan ikon panggil di sebelah kanan yang akan membuka layar panggil saat klik. Ikon panggilan hanya terlihat seperti 9 kotak hitam, disusun 3 oleh 3, harus seperti apa yang Anda lihat di telepon biasa.
Saya menggunakan tel tipe input untuk semantik HTML5 yang tepat, tetapi Anda juga dapat menggunakan teks ketik input jika Anda mau.
2. Buat Layar Dial
Itu layar panggil aku s kotak angka dari 0 hingga 9 plus beberapa karakter khusus. Itu bisa dibuat dengan baik HTML Di sini, saya akan menunjukkan kepada Anda cara membuat tabel layar panggil dalam JavaScript. Anda dapat, tentu saja, menambahkan tabel secara langsung dalam kode sumber HTML jika Anda menginginkannya. Pertama, buat yang baru Tambah sebuah Keduanya Baris terakhir berbeda, karena terdiri dari dua karakter khusus, Untuk membuat baris terakhir ke layar panggil, tambahkan baris berikut Itu layar panggil sekarang selesai, tambahkan ke Untuk membuatnya lebih menarik, gaya layar panggil dengan CSS. Anda tidak harus tetap dengan gaya saya, tapi jangan lupa menambahkan Pertama, tambahkan Kemudian, tambahkan event handler klik ke ikon dial dengan JavaScript untuk matikan visibilitas dari layar panggil. Untuk melakukannya, Anda harus menggunakan yang disebutkan di atas Itu Tambahkan fungsi kustom itu input digit ke dalam bidang nomor telepon pada klik sel-sel layar dial. Itu Sekarang, Anda punya layar panggil yang berfungsi untuk memasukkan bidang nomor telepon. Untuk mengimbangi CSS, ubah warna latar belakang digit di Tambah sebuah validasi regex sederhana untuk memvalidasi nomor telepon saat pengguna memasukkan angka ke dalam kolom input. Menurut aturan validasi yang saya gunakan, nomor telepon hanya dapat dimulai dengan angka atau angka Anda dapat melihat visualisasi ekspresi reguler saya di screenshow di bawah ini dibuat dengan aplikasi Debuggex. Anda juga dapat memvalidasi nomor telepon sesuai format nomor telepon negara atau wilayah Anda. Buat objek Ekspresi Reguler baru, dan simpan di Ketika input tidak divalidasi, maka Saya m menambahkan batas merah ke kolom input saat input tidak valid, tetapi Anda dapat memberi tahu pengguna dengan cara lain, misalnya, dengan pesan kesalahan. Itu Perhatikan bahwa saya juga menambahkan validasi tambahan untuk karakter maksimum (tidak boleh lebih dari 15) dengan menggunakan Anda pemilih nomor telepon sudah siap, lihat demo terakhir di bawah ini. atau JavaScript.
'meja' elemen dalam DOM dengan menggunakan createElement () metode. Juga berikan itu 'dial' pengidentifikasi. / * Buat layar panggil * / var dial = document.createElement ('table'); dial.id = 'dial'; untuk lingkaran untuk memasukkan empat baris tabel panggil dengannya. Lalu, untuk setiap baris, jalankan lagi untuk lingkaran untuk menambahkan tiga sel per baris. Tandai setiap sel dengan 'dialDigit' kelas. untuk (var rowNum = 0; rowNum < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) var cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
untuk loop di atas menghitung angka yang masuk ke sel-sel tabel panggil - nilai-nilai dari cell.textContent properti - dengan cara berikut: (colNum + 1) + (rowNum * 3) / * baris pertama * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * baris kedua * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * dll * /
- dan + yang digunakan dalam format nomor telepon untuk mengidentifikasi kode regional, dan digit 0.jika pernyataan ke dalam untuk lingkaran. untuk (var rowNum = 0; rowNum < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) /* if last row */ if (rowNum === 3) cell = row.insertCell(colNum); cell.textContent = '-'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '0'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '+'; cell.className = 'dialDigit'; break; cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
#dialWrapper Wadah HTML yang Anda buat pada Langkah 1 dengan menggunakan dua metode DOM:querySelector () metode untuk pilih wadahnyaappendChild () metode untuk tambahkan layar panggil - diadakan di panggil variabel - ke wadah document.querySelector ('# dialWrapper'). appendChild (dial); 
3. Gaya Layar Dial
pilih-pengguna: tidak ada; properti ke #dial wadah sehingga saat pengguna mengklik angka, teks tidak akan dipilih oleh kursor. #dial width: 200px; tinggi: 200px; border-collapse: runtuh; perataan teks: tengah; posisi: relatif; -ms-user-select: tidak ada; -webkit-user-select: tidak ada; -moz-user-select: tidak ada; pilih-pengguna: tidak ada; warna: # 000; box-shadow: 0 0 6px # 999; .dialDigit border: 1px solid #fff; kursor: pointer; warna latar: rgba (255.228.142, .7);
4. Tampilkan Layar Dial pada Klik
visibilitas: tersembunyi; aturan gaya untuk #dial di CSS di atas untuk sembunyikan layar panggil secara default. itu hanya akan ditampilkan ketika pengguna mengklik ikon panggil.querySelector () dan addEventListener () metode. Yang terakhir melampirkan acara klik ke ikon panggil dan memanggil kebiasaan toggleDial () fungsi.toggleDial () fungsi mengubah visibilitas dari layar panggil dari tersembunyi ke terlihat, dan kembali. document.querySelector ('# dialIcon'). addEventListener ('click', toggleDial); function toggleDial () dial.style.visibility = dial.style.visibility === 'disembunyikan' || dial.style.visibility === "? 'terlihat': 'tersembunyi'; 5. Tambahkan Fungsionalitas
dialNumber () fungsi menambahkan digit satu per satu ke isi teks properti dari bidang input yang ditandai dengan #No Telepon pengidentifikasi. phoneNo = document.querySelector ('# phoneNo'); function dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); untuk (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); : melayang dan :aktif (ketika pengguna mengkliknya) menyatakan. .dialDigit: hover background-color: rgb (255.228.142); .dialDigit: active background-color: # FF6478;
6. Tambahkan Validasi Ekspresi Reguler
+ karakter, dan terima - karakter sesudahnya.
pola variabel. Buat juga custom mengesahkan() fungsi yang memeriksa apakah nomor telepon yang dimasukkan sesuai dengan ekspresi reguler, dan jika itu setidaknya 8 karakter.mengesahkan() fungsi perlu berikan umpan balik kepada pengguna. pattern = new RegExp ("^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); validasi fungsi (txt) // setidaknya 8 karakter untuk no telepon yang valid. if (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Lakukan Validasi
mengesahkan() fungsi perlu dipanggil untuk melakukan validasi. Sebut saja dari dialNumber () fungsi yang Anda buat pada Langkah 5 untuk memvalidasi nilai No Telepon variabel.jika pernyataan. function dialNumber () var val = phoneNo.value + this.textContent; // karakter maksimum diperbolehkan, 15 jika (val.length> 15) return false; memvalidasi (val); phoneNo.value = val;
