Format Medan Input secara automatik dengan Cleave.js
Fikirkan semua bidang input yang berbeza memerlukan struktur yang diformatkan. Nombor telefon, kad kredit, tarikh lahir, alamat jalanan ... mereka semua ada corak yang unik.
Sudah cukup mudah untuk meninggalkan bidang ini sahaja dan mempercayai pengguna. Tetapi mungkin lebih baik untuk digunakan Cleave.js, a plugin JavaScript vanila percuma untuk membantu anda medan input format secara automatik.
HTML5 dilengkapi dengannya satu set input yang berkaitan dengan corak data seperti nombor telefon. Dengan Cleave, anda boleh mengambil ini ke peringkat seterusnya dengan input tersuai itu teks format secara automatik kerana ia ditaip.
Secara lalai, plugin ini menyokong lima corak teks asas:
- Nombor kad kredit
- Nombor telefon
- Tarikh
- Styling angka (dengan koma)
- Medan input tersuai
Pilihan terakhir adalah yang paling keren kerana anda boleh membuat anda corak data tersuai sendiri dari awal. Kental tidak memaksa anda untuk mengikuti sebarang metodologi yang ketat.
Sebaliknya, ia memberi anda alat untuk membina input anda sendiri dengan sokongan pilihan untuk komponen Reakt dan Sudut. Ia juga menyokong semua pelayar utama dan sepadan dengan sokongan untuk pelayar warisan bersama dengan jQuery.
Perhatikan ini bukan plugin yang sukar untuk disiapkan. Anda sasarkan apa sahaja ID atau kelas yang anda ada pada medan input anda dan lulus itu ke dalam contoh yang baru. Berikut adalah coretan sampel:
var cleave = new Cleave ('input-phone', phone: true, phoneRegionCode: 'country'); Walau bagaimanapun, manakala Cleave mungkin mudah untuk ditubuhkan, ia mempunyai banyak ciri tersuai anda boleh mainan dengan.
Semua dokumentasi adalah dihoskan di dalam repo, jadi anda perlu melayari halaman GitHub ke mencari semua kaedah & pilihan yang berlainan. Khususnya, halaman pilihan mempunyai banyak yang perlu dilalui dan mungkin mengambil sedikit masa untuk mencari apa yang anda mahukan.
Syukurlah, Cleave telah banyak contoh hidup anda boleh belajar dan meniru. Contoh-contoh ini juga percuma untuk dimuat turun dari repo GitHub. Sekiranya anda mahu melihatnya lebih banyak contoh hidup lawati Halaman rumah Cleave.js atau daftar keluar biola ini penuh dengan demo.
