Memformat Bidang Input Secara Otomatis dengan Cleave.js
Pikirkan semua bidang input yang berbeda itu membutuhkan struktur yang diformat. Nomor telepon, kartu kredit, tanggal lahir, alamat jalan ... semuanya ada pola unik sendiri.
Cukup mudah untuk meninggalkan bidang ini sendirian dan memercayai pengguna. Tapi mungkin lebih baik digunakan Cleave.js, Sebuah Plugin vanilla JavaScript gratis untuk membantumu secara otomatis memformat bidang input.
HTML5 hadir dengan set input yang terkait dengan pola data seperti nomor telepon. Dengan Cleave, Anda dapat membawa ini ke level selanjutnya input yang disesuaikan bahwa secara otomatis memformat teks seperti yang diketik.
Secara default, plugin mendukung lima pola teks dasar:
- Nomor kartu kredit
- Nomor telepon
- tanggal
- Penataan angka (dengan koma)
- Bidang input khusus
Pilihan terakhir itu adalah yang paling keren karena Anda bisa membuatnya memiliki pola data khusus dari awal. Cleave tidak memaksa Anda untuk mengikuti metodologi ketat apa pun.
Sebaliknya, itu memberi Anda alat untuk membangun input Anda sendiri dengan dukungan opsional untuk komponen Bereaksi dan Bersudut. Ini juga mendukung semua browser utama dan harus cocok dengan dukungan untuk browser lama bersama jQuery.
Perhatikan ini bukan plugin yang sulit untuk diatur. Kamu targetkan ID atau kelas apa pun yang Anda miliki di bidang input Anda dan meneruskan itu ke instance Cleave baru. Berikut cuplikan sampel:
var cleave = Cleave baru ('. input-ponsel', phone: true, phoneRegionCode: 'country'); Namun, sementara Cleave mungkin mudah diatur, ia memiliki banyak fitur khusus Anda bisa mempermainkan.
Semua dokumentasinya di-host di dalam repo, jadi Anda harus menelusuri halaman GitHub temukan semua metode & opsi yang berbeda. Secara khusus, halaman opsi memiliki banyak hal yang harus dilalui dan mungkin perlu beberapa saat untuk menemukan apa yang Anda inginkan.
Untungnya, Cleave punya banyak contoh langsung Anda bisa belajar dan mereplikasi. Contoh-contoh ini juga bebas untuk diunduh dari repo GitHub. Jika kamu ingin melihat lebih banyak contoh langsung mengunjungi Halaman muka Cleave.js atau lihat biola ini penuh sesak dengan demo.
