प्रारूप इनपुट फ़ील्ड स्वचालित रूप से Cleave.js के साथ है

सभी अलग-अलग इनपुट फ़ील्ड के बारे में सोचें एक स्वरूपित संरचना की आवश्यकता है. फोन नंबर, क्रेडिट कार्ड, जन्मतिथि, सड़क के पते ... ये सभी उनके पास हैं अपने अद्वितीय पैटर्न.

इन क्षेत्रों को अकेले छोड़ना और उपयोगकर्ता पर भरोसा करना काफी आसान है। लेकिन इसका इस्तेमाल करना बेहतर हो सकता है Cleave.js, ए मुफ्त वेनिला जावास्क्रिप्ट प्लगइन आपकी मदद के लिए स्वचालित रूप से इनपुट फ़ील्ड प्रारूपित करें.

HTML5 इसके साथ आता है डेटा पैटर्न से संबंधित इनपुट्स का अपना सेट जैसे टेलीफोन नंबर। क्लीव के साथ, आप इसे अगले स्तर तक ले जा सकते हैं अनुकूलित इनपुट उस स्वचालित रूप से पाठ को प्रारूपित करें जैसा कि यह टाइप किया गया है.

डिफ़ॉल्ट रूप से, प्लगइन समर्थन करता है पांच मूल पाठ पैटर्न:

1. क्रेडिट कार्ड नंबर
2. फोन नंबर
3. खजूर
4. संख्यात्मक स्टाइल (अल्पविराम के साथ)
5. कस्टम इनपुट फ़ील्ड

यह अंतिम विकल्प सबसे अच्छा है क्योंकि आप अपना बना सकते हैं खरोंच से खुद के कस्टम डेटा पैटर्न. क्लीव आपको किसी भी सख्त कार्यप्रणाली का पालन करने के लिए मजबूर नहीं करता है.

इसके बजाय, यह आपको उपकरण देता है अपने स्वयं के इनपुट का निर्माण करें साथ में प्रतिक्रिया और कोणीय घटकों के लिए वैकल्पिक समर्थन. यह भी समर्थन करता है सभी प्रमुख ब्राउज़र और के लिए समर्थन से मेल खाना चाहिए विरासत ब्राउज़र साथ में jQuery.

ध्यान दें कि यह सेट करने के लिए एक कठिन प्लगइन नहीं है। आप आपके पास जो भी आईडी या क्लास है उसे टारगेट करें अपने इनपुट फ़ील्ड पर और एक नए क्लीव उदाहरण में पास करें. यहाँ एक नमूना स्निपेट है:

 var cleave = new Cleave ('input-phone', phone: true, phoneRegionCode: 'देश' '); 

हालाँकि, जबकि Cleave को स्थापित करना आसान हो सकता है, यह है बहुत सारी कस्टम सुविधाएँ आप के साथ खिलौना कर सकते हैं.

सभी प्रलेखन है रेपो के अंदर होस्ट किया गया, इसलिए आपको GitHub पेज को ब्राउज़ करना होगा सभी विभिन्न तरीकों और विकल्पों को खोजें. विशेष रूप से, विकल्प पृष्ठ के माध्यम से जाने के लिए बहुत कुछ है और जो आप चाहते हैं उसे खोजने में थोड़ा समय लग सकता है.

शुक्र है, क्लीव के पास है बहुत सारे जीवंत उदाहरण आप अध्ययन और प्रतिकृति कर सकते हैं। ये उदाहरण भी हैं डाउनलोड करने के लिए स्वतंत्र GitHub रेपो से। यदि तुम देखना चाहो अधिक जीवंत उदाहरण दौरा करना Cleave.js होम पेज या बाहर की जाँच करें यह बेला डेमो के साथ जाम से भरा.