Cara Membuat Pemilih Nombor Telefon Mudah
Nombor telefon, selain nama dan e-mel, adalah maklumat hubungan yang paling sering digunakan dalam borang dalam talian. Bidang nombor telefon biasanya direka dengan cara yang menghendaki pengguna menaip nombor menggunakan papan kekunci mereka. Kaedah ini sering menghasilkan input data yang tidak tepat.
Untuk mengurangkan kesilapan masukan pengguna dan meningkatkan pengalaman pengguna laman web anda, anda boleh mencipta GUI yang membolehkan pengguna memasukkan nombor telefon dengan cepat, dengan cara yang serupa dengan pemetik tarikh.
Dalam tutorial ini, anda akan melihat bagaimana cara tambah pemilih nombor telefon mudah ke medan input. Kami akan menggunakan HTML5, CSS3 dan JavaScript untuk mendapatkan GUI yang boleh anda lihat dan uji di demo di bawah. Kami juga akan meletakkan ungkapan biasa digunakan untuk memastikan pengguna benar-benar memasukkan nombor telefon yang sah.
1. Buat Nombor Nombor Telefon
Pertama, buat medan input dengan ikon dail di sebelah kanan yang akan membuka skrin dail pada klik. Ikon dail hanya kelihatan seperti 9 kotak hitam, disusun 3 oleh 3, mesti seperti apa yang anda lihat pada telefon biasa.
Saya menggunakannya tel jenis input untuk semantik HTML5 yang betul, tetapi anda juga boleh menggunakannya teks jenis input jika anda mahu.
2. Buat Skrin Dail
The skrin dail adalah grid nombor dari 0 hingga 9 ditambah beberapa aksara khas. Ia boleh dibuat dengan sama ada HTML Di sini, saya akan menunjukkan kepada anda cara membuat jadual skrin dail dalam JavaScript. Anda boleh, tentu saja, tambah jadual terus dalam kod sumber HTML jika anda lebih suka cara itu. Pertama, buat yang baru Tambahkan Kedua-dua Baris terakhir adalah berbeza, kerana ia terdiri daripada dua watak khas, Untuk membuat baris terakhir pada skrin dail, tambah yang berikut The skrin dail kini selesai, tambahnya kepada Untuk menjadikannya lebih menarik, gaya skrin dail dengan CSS. Anda tidak perlu melekat dengan gaya saya, tetapi jangan lupa Tambah Pertama, tambahkan Kemudian, tambah pengendali acara klik ke ikon dail dengan JavaScript kepada toggle visibilitas skrin dail. Untuk berbuat demikian, anda perlu menggunakan yang disebutkan di atas The Tambah fungsi tersuai yang memasukkan digit ke dalam medan nombor telefon pada klik sel-sel skrin dail. The Sekarang, anda mempunyai a skrin dail kerja untuk memasukkan medan nombor telefon. Untuk bersaing dengan CSS, tukar warna latar belakang digit di dalamnya Tambahkan pengesahan regex mudah untuk mengesahkan nombor telefon semasa pengguna memasuki digit ke dalam medan input. Menurut peraturan pengesahan yang saya gunakan, nombor telefon hanya boleh dimulakan dengan sama ada satu digit atau yang Anda dapat melihat visualisasi ungkapan biasa saya pada skrin di bawah yang dibuat dengan aplikasi Debuggex. Anda juga boleh mengesahkan nombor telefon seperti format nombor telefon negara atau rantau anda. Buat objek Ekspresi Biasa baru, dan simpan di dalam Apabila input tidak sahkan, Saya menambah sempadan merah ke medan input apabila input tidak sah, tetapi anda dapat memberitahu pengguna dengan cara lain, misalnya, dengan mesej ralat. The Perhatikan bahawa saya juga menambah pengesahan tambahan untuk aksara maksimum (tidak boleh melebihi 15) dengan menggunakan Anda pemilih nombor telefon kini sudah siap, lihat demo terakhir di bawah. atau JavaScript.
'jadual' elemen dalam DOM dengan menggunakan createElement () kaedah. Juga berikan 'dail' pengecam. / * Buat skrin dail * / var dial = document.createElement ('table'); dial.id = 'dial'; untuk gelung untuk memasukkan empat baris meja dail dengannya. Kemudian, untuk setiap baris, jalankan lagi untuk gelung untuk menambah tiga sel setiap baris. Tandakan 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 gelung di atas mengira digit yang masuk ke dalam sel-sel jadual dail - nilai-nilai cell.textContent harta - dengan cara berikut: (1) + (0 * 3) = 1 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 3 6 / * dan sebagainya * /
- dan + yang digunakan dalam format nombor telefon untuk mengenal pasti kod serantau dan angka 0.jika kenyataan kepada dalaman untuk gelung. 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 Kontena HTML yang anda buat dalam Langkah 1 dengan menggunakan dua kaedah DOM:querySelector () kaedah untuk pilih bekasappendChild () kaedah untuk tambah skrin dail - yang diadakan di dail pemboleh ubah - ke bekas document.querySelector ('# dialWrapper'). appendChild (dial); 
3. Gaya Skrin Dail
pengguna-pilih: tiada; harta kepada #dail bekas supaya sementara pengguna mengklik pada digit, teks itu tidak akan dipilih oleh kursor. #dial width: 200px; ketinggian: 200px; runtuhan sempadan: runtuh; teks-align: center; kedudukan: relatif; -ms-user-select: none; -webkit-user-select: none; -moz-user-select: none; pengguna-pilih: tiada; warna: # 000; kotak-bayang: 0 0 6px # 999; .dialDigit border: 1px solid #fff; kursor: penunjuk; warna latar belakang: rgba (255,228,142, .7);
4. Tunjukkan Skrin Dail pada Klik
keterlihatan: tersembunyi; peraturan gaya untuk #dail dalam CSS di atas kepada sembunyikan skrin dail secara lalai. ia hanya akan ditunjukkan apabila pengguna mengklik pada ikon dail.querySelector () dan juga addEventListener () kaedah. Yang terakhir melekatkan peristiwa klik ke ikon dail dan memanggil adat toggleDial () fungsi.toggleDial () fungsi mengubah keterlihatan skrin dail dari tersembunyi hingga kelihatan, dan belakang. document.querySelector ('# dialIcon'). addEventListener ('klik', toggleDial); fungsi toggleDial () dial.style.visibility = dial.style.visibility === 'hidden' || dial.style.visibility === "? 'boleh dilihat': 'tersembunyi'; 5. Tambah Fungsi
dialNumber () fungsi menambah angka satu demi satu kepada textContent harta medan input yang ditandai dengan #phoneNo pengecam. phoneNo = document.querySelector ('# phoneNo'); fungsi dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('.didDigit'); untuk (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); : berlegar dan : aktif (apabila pengguna mengklik padanya) menyatakan. .dialDigit: hover background-color: rgb (255,228,142); .dialDigit: active background-color: # FF6478;
6. Tambah Pengesahan Expression Regular
+ watak, dan menerima - watak selepas itu.
corak pembolehubah. Juga buat adat sahkan () fungsi yang memeriksa jika nombor telefon yang dimasukkan mematuhi ungkapan biasa, dan jika ia sekurang-kurangnya 8 aksara panjang.sahkan () fungsi perlu memberi maklum balas kepada pengguna. pola = baru RegExp ("^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); fungsi mengesahkan (txt) // sekurang-kurangnya 8 aksara untuk telefon tidak sah. jika (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Lakukan Pengesahan
sahkan () fungsi perlu dipanggil untuk melaksanakan pengesahan. Panggil ia dari dialNumber () fungsi yang anda buat dalam Langkah 5 untuk mengesahkan nilai telefonNo pembolehubah.jika pernyataan. fungsi dialNumber () var val = phoneNo.value + this.textContent; // aksara maksimum yang dibenarkan, 15 jika (val.length> 15) kembali palsu; sahkan (val); phoneNo.value = val;
