Cleave.js ile Giriş Alanlarını Otomatik Olarak Biçimlendirme
Tüm farklı giriş alanlarını düşünün. biçimlendirilmiş bir yapı gerektirir. Telefon numaraları, kredi kartları, doğum tarihleri, sokak adresleri… hepsinde kendine özgü kalıplar.
Bu alanları yalnız bırakmak ve kullanıcıya güvenmek yeterince kolaydır. Ama kullanmak daha iyi olabilir Cleave.js, bir ücretsiz vanilya JavaScript eklentisi sana yardım etmek için giriş alanlarını otomatik olarak biçimlendir.
HTML5 onunla birlikte gelir veri desenleriyle ilgili kendi girdi grubu telefon numaraları gibi. Cleave ile bunu bir sonraki seviyeye alabilirsiniz. özelleştirilmiş girdiler o metni otomatik olarak biçimlendir yazıldığı gibi.
Varsayılan olarak, eklenti destekler beş temel metin deseni:
- Kredi kartı numaraları
- Telefon numaraları
- Tarih
- Sayısal stil (virgül ile)
- Özel giriş alanları
Bu son seçim en havalı olanı çünkü istediğin şeyi yapabilirsin. sıfırdan kendi özel veri desenleri. Cleave sizi katı bir metodoloji izlemeye zorlamıyor.
Bunun yerine, size gereken araçları verir. kendi girdilerinizi oluşturun ile React ve Angular bileşenleri için isteğe bağlı destek. Ayrıca destekler tüm büyük tarayıcılar ve destekle eşleşmeli eski tarayıcılar ile birlikte jQuery.
Bunun ayarlanması zor bir eklenti olmadığını unutmayın. Sen sahip olduğunuz kimliği veya sınıfı hedefleyin giriş alanınızda ve bunu yeni bir Cleave örneğine geçir. İşte bir örnek pasajı:
var cleave = new Cleave ('. giriş telefonu', telefon: gerçek, phoneRegionCode: 'country'); Ancak, Cleave’ın kurulması kolay olabilir, ancak birçok özel özellik ile oyuncak yapabilirsiniz.
Tüm belgeler repo içinde barındırılan, bu yüzden GitHub sayfasına göz atmanız gerekir. tüm farklı yöntemleri ve seçenekleri bul. Özellikle, seçenekler sayfası geçmesi gereken çok şey var ve ne istediğini bulmak için biraz zaman alabilir.
Neyse ki, Cleave vardır bol miktarda canlı örnek ders çalışabilir ve çoğaltabilirsiniz. Bu örnekler ayrıca indirmek ücretsiz GitHub deposundan. Eğer görmek istiyorsan daha canlı örnekler ziyaret et Cleave.js ana sayfası veya kontrol et bu keman demolarla doludur.
