Masker telepon. Menutupi dan memvalidasi bidang telepon dengan jQuery

Plugin jQuery ini memungkinkan Anda untuk secara otomatis memilih masker input yang sesuai berdasarkan awal nomor telepon yang dimasukkan. Ini memungkinkan Anda memasukkan nomor telepon di halaman situs web lebih cepat dan bebas kesalahan. Selain itu, plug-in yang dikembangkan dapat digunakan di area lain, jika aturan input dapat direpresentasikan sebagai beberapa masker input.

pengantar

Situs web memerlukan masukan informasi nomor telepon. Kebetulan setiap negara memiliki hak untuk menetapkan aturan panggilan dan panjang nomornya sendiri, sebagai akibatnya antara penduduk negara lain kebingungan muncul dari waktu ke waktu: beberapa digunakan untuk menunjukkan angka dengan angka awal 8, yang lain dengan angka awal 0, dan yang lain lagi dengan tanda +.

Ikhtisar solusi yang ada

Untuk entah bagaimana menyelesaikan kesulitan yang muncul dan membawa angka ke format tunggal, ada 3 solusi utama:
  1. Pengguna diminta untuk memasukkan nomor menggunakan masker input. Keuntungan: tampilan nomor yang jelas meminimalkan kemungkinan kesalahan dalam nomor. Kekurangan: setiap negara memiliki ejaan dan panjang nomornya sendiri.
  2. Pengguna diminta untuk memilih negara secara terpisah dan memasukkan nomor lainnya secara terpisah; mungkin menggunakan masker input. Manfaat: Kemampuan untuk menggunakan masker input yang berbeda untuk negara yang berbeda (serta wilayah dalam suatu negara). Kekurangan: Daftar negara (dan wilayah dalam setiap negara) bisa panjang; nomor telepon tidak ada lagi secara keseluruhan (atau pra-pemrosesan diperlukan sebelum menyimpan dan menampilkan nomor).
  3. Letakkan tanda + di depan nomor (di luar input) dan hanya boleh memasukkan angka. Keuntungan: kemudahan implementasi. Kekurangan: kurangnya tampilan visual dari nomor tersebut.

Solusi yang Disarankan

Akibatnya, diputuskan untuk memodifikasi topeng input biasa sehingga berubah sesuai dengan nilai nomor saat ini. Selain itu, saat Anda memasukkan nomor, disarankan untuk menampilkan nama negara yang ditentukan. Pendekatan ini, secara subjektif, harus menyelesaikan semua kekurangan dari solusi yang tercantum di atas.

Mengingat jumlah negara di dunia yang relatif sedikit, maka diputuskan untuk menyusun daftar input mask untuk semua negara. Informasi yang dipublikasikan di situs web International Telecommunication Union digunakan sebagai sumber.

Pengumpulan informasi ini membawa banyak kejutan. Dalam proses pengumpulan informasi, perlu mempertimbangkan semua opsi yang memungkinkan nomor telepon, termasuk di dalam negeri. Namun, mengingat jumlah yang besar informasi yang diproses secara manual, ada kemungkinan bahwa ketidakakuratan tetap ada dalam database yang dikumpulkan. Seiring berjalannya waktu, rencananya akan dilakukan koreksi pada set awal.

Implementasi perangkat lunak

Implementasi jquery.inputmask digunakan sebagai inti dari input mask, yang berulang kali disebutkan di Habrahabr. Plugin ini saat ini sedang dikembangkan secara aktif dan, terlebih lagi, dirancang sedemikian rupa sehingga cukup dengan menulis ekstensi untuknya. Namun, dalam masalah ini ternyata hampir tidak mungkin untuk menulis ekstensi seperti itu. Saya tidak mengubah atau menulis ulang plugin asli untuk kebutuhan saya, karena. penulisnya terus bekerja secara aktif untuk memperluas fungsionalitas, akibatnya aplikasi suntingan saya mungkin bermasalah. Oleh karena itu, saya harus menulis plug-in di atas inti utama, yang memantau (ditambah penyadapan) pengaruh eksternal dan memodifikasi data. Untuk menyuntikkan pawang Anda pengaruh luar sebelum handler plugin utama, plugin-library jquery.bind-first digunakan.
Menyortir masker input yang diizinkan
Untuk memilih masker input yang paling tepat dengan benar, seluruh rangkaian masker harus terlebih dahulu diurutkan dengan cara khusus. Saat mengembangkan aturan penyortiran, konvensi berikut diadopsi:
  1. Semua karakter dalam topeng input dibagi menjadi 2 jenis: karakter penting(dalam kasus saya, ini adalah simbol # , yang berarti angka arbitrer, dan angka 0-9) dan karakter dekorator (yang lainnya).
  2. Pembagian karakter lain dalam topeng input adalah karakter templat (dalam kasus saya ini adalah karakter #) dan yang lainnya.

Hasilnya adalah aturan penyortiran berikut, dalam urutan penerapannya:

  1. Saat membandingkan 2 topeng input karakter demi karakter, hanya karakter signifikan (bukan dekorator) yang diperhitungkan.
  2. Karakter pola yang berbeda diperlakukan sama, dan karakter penting lainnya dibandingkan berdasarkan kodenya.
  3. Karakter non-pola selalu lebih kecil dari karakter pola dan akibatnya ditempatkan lebih tinggi.
  4. Semakin pendek panjang karakter signifikan dalam input mask, semakin kecil input mask dan semakin tinggi.
Cari masker input yang sesuai
Saat membandingkan teks input dengan topeng berikutnya dari daftar yang diurutkan, hanya karakter signifikan dari setiap topeng yang diperhitungkan. Jika string lebih panjang dari input mask, meskipun semua karakter sebelumnya telah lulus tes, maka input mask dianggap tidak valid. Jika teks input memenuhi beberapa input mask, maka yang pertama dikembalikan. Selanjutnya, dalam topeng yang ditemukan, semua karakter penting (termasuk yang bukan templat) diganti dengan satu templat, yang merupakan kombinasi dari semua karakter yang diizinkan oleh salah satu karakter templat.
Menangani dan mencegat acara
Untuk mencegah konflik dengan event handler dari mesin input mask utama, kejadian berikut dicegat:
  • kunci ke bawah- penekanan tombol Backspace dan Delete dilacak - untuk mengubah input mask saat ini sebelum handler utama menghapus satu karakter dari teks. Selain itu, menekan tombol Sisipkan, yang mengubah mode input teks, dimonitor untuk sinkronisasi.
  • penekanan tombol- karena karakter input mungkin tidak diizinkan oleh masker input asli (karena semua karakter penting di dalamnya digantikan oleh template), Anda perlu memeriksa garis baru untuk memenuhi salah satu topeng yang diizinkan. Jika tidak ada topeng seperti itu, maka input karakter dibuang, jika tidak, topeng input diperbarui, setelah itu acara dipindahkan ke pengendali kernel.
  • tempel, memasukkan- tempel teks dari clipboard. Sebelum meneruskan pemrosesan ke kernel, masker input dipilih untuk string yang dihasilkan dari menempelkan teks dari clipboard. Jika masker input tidak dapat dipilih, teks akan terpotong karakter demi karakter dari akhir - hingga teks memenuhi setidaknya satu masker input. Operasi serupa dilakukan saat mengoreksi teks di kolom input dengan memanggil fungsi val(), serta saat menginisialisasi input mask, jika diterapkan ke kolom input yang tidak kosong.
  • seret dan jatuhkan, menjatuhkan- pemrosesan mirip dengan acara tempel.
  • mengaburkan - pemrosesan tambahan jika mode pembersihan teks diaktifkan saat kehilangan fokus, jika tidak memenuhi masker input. Acara ini ditangkap setelah pawang utama, tidak seperti yang sebelumnya.

Semua acara digantung di ruang inputmask. Ini menghindari perilaku yang salah saat memanggil inputmask setelah add-in diinisialisasi (karena kernel menghapus semua handler yang diinstal sebelumnya di ruang inputmask selama inisialisasi).

Contoh penggunaan

Format Daftar Masker
Daftar topeng adalah larik objek JavaScript, lebih disukai dengan kumpulan properti yang sama. Setidaknya satu properti yang berisi masker input harus ada di semua objek array. Nama parameter yang mengandung topeng bisa sewenang-wenang. Di bawah ini adalah fragmen dari array semacam itu:
[ … ( "topeng": "+7(###)###-##-##", "cc": "RU", "name_en": "Rusia", "desc_en": "", " name_ru": "Rusia", "desc_ru": "" ), ( "topeng": "+250(###)###-###", "cc": "RW", "name_en": " Rwanda", "desc_en": "", "name_ru": "Rwanda", "desc_ru": "" ), ( "masker": "+966-5-####-####", "cc ": "SA", "name_en": "Arab Saudi", "desc_en": "mobile", "name_ru": "Arab Saudi", "desc_ru": "mobile" ), ( "mask": "+966- #-###-####", "cc": "SA", "name_en": "Arab Saudi", "desc_en": "", "name_ru": "Arab Saudi", "desc_ru": " "), ...]
Opsi koneksi plugin
Sebelum menghubungkan, Anda perlu mengunduh dan mengurutkan daftar topeng. Ini dilakukan dengan menjalankan fungsi berikut:
$.masksSort = function(maskList, defs, match, key)
  • daftar topeng- array objek yang menyimpan masker input (lihat di atas untuk fragmen objek);
  • defs- array karakter templat (dalam kasus saya, ini adalah simbol #);
  • cocok- ekspresi reguler yang menjelaskan karakter penting (dalam kasus saya adalah /|#/);
  • kunci- nama parameter objek array yang berisi masker input.

Saat terhubung, objek khusus diteruskan ke plugin, menjelaskan pekerjaannya. objek ini berisi set parameter berikut:

  • masker masukan- objek yang berisi parameter yang diteruskan ke plugin inputmask utama;
  • cocok- ekspresi reguler yang menjelaskan karakter penting, kecuali karakter template;
  • mengganti- karakter template, yang akan digantikan oleh semua karakter penting; mungkin tidak ada dalam objek definisi dari objek inputmask;
  • Daftar- array objek yang menjelaskan masker input;
  • daftarKunci- nama parameter di dalam objek yang menyimpan masker input;
  • diMaskChange- fungsi yang dipanggil saat memperbarui topeng input; sebagai parameter pertama, objek dari array dilewatkan, topeng input yang sesuai dengan teks yang dimasukkan, dan sebagai yang kedua - akurasi definisi topeng: benar - topeng input cocok sepenuhnya, salah - karakter tambahan diperlukan untuk menentukan topeng dengan andal.

Untuk menginisialisasi plugin, Anda perlu menerapkan metode inputmasks ke bidang input:
$.fn.inputmasks = fungsi(maskOpts, mode)

  • maskerOpts- objek yang menjelaskan pengoperasian plugin;
  • mode- pilihan; v saat ini nilai isCompleted didukung - sebagai hasilnya, metode ini mengembalikan nilai true jika teks yang sesuai dengan topeng yang sesuai dimasukkan secara lengkap dan false jika tidak.
Contoh koneksi plugin

Demonstrasi

Contoh demonstrasi plugin yang dikembangkan disajikan di

Sepintas, jawabannya jelas: tandai bidang "nomor telepon" sesuai kebutuhan. Tetapi ada ceruk di mana pengguna dapat meninggalkan situs karena bidang wajib tambahan. Misalnya, aplikasi, perangkat lunak, situs yang menjual konten. Namun, nomor pengguna untuk proyek semacam itu penting sebagai data tambahan yang memungkinkan untuk berinteraksi dengan calon pelanggan di masa mendatang. Selain itu, ada solusi sederhana dan efektif - penggunaan masker input. Mari kita buktikan dengan kasus.

Mengapa kita membutuhkan masker input?

Masker input menunjukkan format di mana data harus dimasukkan ke dalam bidang. Misalnya, jika pengguna memasukkan nomor telepon tanpa kode area, atau nomor telepon di bidang alamat, mereka tidak akan dapat pindah ke item berikutnya. Form mask memberikan tampilan yang seragam dari data input, yang menyederhanakan pencarian dan manajemen database. Dalam rekomendasi Netpeak, masker input nomor telepon adalah elemen wajib dari formulir pemesanan di situs web. Seperti rekomendasi praktis dari para ahli kami, pernyataan ini didasarkan pada kasus pelanggan yang berhasil.

Karena situs tersebut berspesialisasi dalam aplikasi, bidang untuk memasukkan nomor di situs adalah opsional. Untuk melacak perubahan persentase pelanggan yang mengisi bidang "telepon" di formulir pemesanan di situs, kami menerapkan variabel khusus di Google Analytics. Pada bulan Februari, tidak satu pun dari sembilan pembeli yang mengisi kolom "telepon". Pada bulan Maret, kami menerapkan masker input, dan pengguna mulai mengisinya. Untuk kemurnian percobaan, bidang dibiarkan opsional dan tidak ada perubahan lain yang dilakukan.
Hasil untuk Maret adalah 19 masalah dengan 22 pengguna yang mengisi aplikasi. Dengan kata lain, 85% pengguna yang memesan aplikasi meninggalkan nomor telepon mereka.

Studi kasus situs web Clearinghouse: peningkatan 15,4% dalam penyelesaian bidang nomor telepon

Website klien bergerak dalam bidang jasa penulisan esai, makalah, thesis dan makalah lainnya. Nomor telepon pengguna diinginkan untuk komunikasi, tetapi bidang ini opsional di situs. Pengguna tidak dapat mengisi formulir atau menulis apa pun di bidang ini. Seperti pertama kali, pada tahap pertama kami menyiapkan pelacakan pengisian kolom "telepon" di Google Analytics. Pada bulan November, dari 59 aplikasi yang ditinggalkan oleh pengunjung situs, 15 tidak berisi angka. Artinya, perusahaan hanya menerima 74,6% formulir yang dikirimkan dengan nomor yang lengkap. Kami kemudian menambahkan masker input ke bidang telepon. Pada bulan Desember, situs menerima 60 aplikasi. Pada saat yang sama, hanya 6 formulir yang diisi yang tidak berisi nomor telepon klien. Akibatnya, 90% dari formulir pemesanan yang dikirimkan berisi bidang "telepon" yang diisi dengan benar. Untuk bulan ini - peningkatan 15,4%, hanya karena pengenalan topeng nomor entri. Akhirnya - kasus internal agensi.

Bidang nomor pada formulir pemesanan Netpeak juga opsional. Tetapi nomor telepon penting agar pelanggan selalu mengetahui nomor dan status aplikasi mereka (data ini kami kirimkan melalui SMS), serta untuk mengoptimalkan kerja manajer akun. Periode percobaan, seperti pada contoh sebelumnya, adalah dua bulan. Sebagai hasil dari munculnya topeng input angka, persentase penyelesaian formulir meningkat dari 44% menjadi 83% - sebesar 39,4%.
Setelah percobaan, kami menerapkan topeng di situs. Bidang untuk memasukkan nomor tetap opsional. Aplikasi tidak akan lulus hanya jika nomor yang dimasukkan salah di bidang ini. Pada saat yang sama, digit pertama dalam topeng berubah tergantung pada negara tempat pengguna situs berada. Jika kita berbicara tentang formulir pemesanan di muka, maka menarik untuk mengetahui seberapa jauh lebih baik aplikasi dengan nomor telepon. Kami mengambil semua prospek yang pernah diterima melalui formulir pemesanan di muka dan menghitung persentase prospek yang dikonversi menjadi pelanggan dengan dan tanpa nomor. Yang terakhir ternyata paling banyak di 0,81%.

Kesimpulan: jika seseorang meninggalkan Anda nomornya dalam bentuk, ini bukan jaminan transfer dana.

Jika kita berbicara tentang bentuk pre-order, kemungkinan untuk mengaktifkan kembali pelanggan muncul ke depan, peluang yang terbuka bagi pemasar yang dipersenjatai dengan database nomor telepon pribadi pengguna. Kami akan berbicara tentang kasus reaktivasi yang berhasil di salah satu posting baru. Sementara itu, kami menyarankan Anda untuk membaca tentang tindakan yang harus diambil sebelum tindakan apa pun dengan nomor telepon di database. Bagikan di komentar pengalaman Anda menerapkan masker input untuk nomor telepon dan pengamatan kualitas aplikasi yang masuk.

ARTIKEL TERKAIT