👏🏻 💦 ⛑️ फोन नंबर द्वारा इनपुट मास्क का चयन 🤚🏿 📦 🤜🏿

JQuery के लिए यह प्लगइन आपको फ़ोन नंबर की दर्ज शुरुआत के आधार पर उपयुक्त इनपुट मास्क का चयन करने की अनुमति देता है। यह आपको वेब साइट पेज पर फोन नंबर दर्ज करने की अनुमति देता है तेजी से और त्रुटि मुक्त। इसके अलावा, विकसित प्लगइन का उपयोग अन्य क्षेत्रों में किया जा सकता है यदि इनपुट नियमों को कई इनपुट मास्क के रूप में दर्शाया जा सकता है।

परिचय

वेब साइटों पर, फ़ोन नंबर की जानकारी दर्ज करना बहुत आवश्यक है। ऐसा हुआ कि प्रत्येक देश को अपने स्वयं के डायलिंग नियम और संख्या की लंबाई निर्धारित करने का अधिकार है, जिसके परिणामस्वरूप विभिन्न देशों के निवासियों के बीच समय-समय पर भ्रम की स्थिति पैदा होती है: कुछ का उपयोग 8 अग्रणी अंक के साथ संख्या का संकेत करने के लिए किया जाता है, अन्य 0 अग्रणी अंक के साथ, और अभी भी अन्य लोगों के पास + चिन्ह है।

मौजूदा समाधानों का अवलोकन

किसी तरह कठिनाई को हल करने और संख्याओं को एकल प्रारूप में लाने के लिए, 3 मुख्य समाधान हैं:

उपयोगकर्ता को इनपुट मास्क का उपयोग करके नंबर दर्ज करने के लिए कहा जाता है। लाभ: संख्या का स्पष्ट प्रदर्शन कमरे में संभावित त्रुटियों को कम करता है। नुकसान: प्रत्येक देश की अपनी वर्तनी और संख्या की लंबाई होती है।
उपयोगकर्ता को अलग से देश का चयन करने और शेष संख्या को अलग से दर्ज करने के लिए आमंत्रित किया जाता है; संभवतः एक इनपुट मास्क का उपयोग कर। फायदा: विभिन्न देशों (साथ ही साथ देश के भीतर क्षेत्रों) के लिए विभिन्न इनपुट मास्क का उपयोग करने की क्षमता। नुकसान: देशों की सूची (और प्रत्येक देश के भीतर क्षेत्र) बड़ी हो सकती है; फोन नंबर एक पूरे के रूप में मौजूद है (या नंबर को संग्रहीत करने और प्रदर्शित करने से पहले पूर्व-प्रसंस्करण की आवश्यकता है)।
नंबर (इनपुट के बाहर) के सामने + चिह्न लगाएं और केवल संख्याओं के प्रवेश की अनुमति दें। लाभ: कार्यान्वयन में आसानी। नुकसान: संख्या के एक दृश्य प्रदर्शन की कमी।

प्रस्तावित समाधान

परिणामस्वरूप, परिचित इनपुट मास्क को परिष्कृत करने का निर्णय लिया गया ताकि यह संख्या के वर्तमान मूल्य के अनुसार बदल जाए। इसके अलावा, जैसे ही आप संख्या दर्ज करते हैं, यह निर्धारित देश का नाम प्रदर्शित करने का प्रस्ताव है। यह दृष्टिकोण, विषयगत रूप से, उपरोक्त समाधानों की सभी कमियों को हल करना चाहिए।

यह देखते हुए कि दुनिया में देशों की संख्या अपेक्षाकृत कम है, सभी देशों के लिए इनपुट मास्क की सूची संकलित करने का निर्णय लिया गया। स्रोत ने अंतर्राष्ट्रीय दूरसंचार संघ की वेबसाइट पर प्रकाशित जानकारी का उपयोग किया।

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

सॉफ्टवेयर कार्यान्वयन

Jquery.inputmask कार्यान्वयन, जिसका हबराब पर कई बार उल्लेख किया गया था, इनपुट मास्क के के रूप में उपयोग किया गया था। यह प्लगइन अब सक्रिय रूप से विकसित हो रहा है और, इसके अलावा, इस तरह से डिज़ाइन किया गया है कि यह उसके लिए बस एक्सटेंशन लिखने के लिए पर्याप्त है। हालांकि, इस समस्या में इस तरह के विस्तार को लिखना व्यावहारिक रूप से असंभव था। मैंने अपनी आवश्यकताओं के अनुसार मूल प्लगइन को संशोधित या फिर से लिखा नहीं था, जैसा कि इसके लेखक ने कार्यक्षमता के विस्तार पर सक्रिय रूप से काम करना जारी रखा है, जिसके परिणामस्वरूप मेरे संपादन का अनुप्रयोग समस्याग्रस्त हो सकता है। इसलिए, मुझे मुख्य कोर पर प्लग-इन ऐड-ऑन लिखना था जो बाहरी प्रभावों को मॉनिटर (प्लस इंटरसेप्ट) करता है और डेटा को संशोधित करता है। मुख्य प्लगइन के हैंडलर्स से पहले हमारे बाहरी प्रभाव संचालकों को लागू करने के लिए, jquery.bind-first पुस्तकालय प्लगइन का उपयोग किया गया था।

सॉर्ट किए गए इनपुट मास्क

सबसे उपयुक्त इनपुट मास्क के सही चयन के लिए, मास्क के पूरे सेट को एक विशेष तरीके से पूर्व-सॉर्ट किया जाना चाहिए। सॉर्टिंग नियमों को विकसित करते समय, निम्नलिखित सम्मेलनों को अपनाया गया था:

इनपुट मास्क के सभी पात्रों को 2 प्रकारों में विभाजित किया गया है: महत्वपूर्ण वर्ण (मेरे मामले में, यह # वर्ण है, जिसका अर्थ है एक मनमाना संख्या, और संख्या 0-9) और सज्जाकार वर्ण (शेष सभी)।
इनपुट मास्क में वर्णों का एक और विभाजन वाइल्डकार्ड वर्ण है (मेरे मामले में, यह # चरित्र है) और अन्य सभी।

परिणामस्वरूप, उनके आवेदन के क्रम में निम्नलिखित छंटनी नियम प्राप्त किए गए:

चरित्र द्वारा 2 इनपुट मास्क चरित्र की तुलना करते समय, केवल महत्वपूर्ण पात्रों (नहीं सज्जाकार) को ध्यान में रखा जाता है।
विभिन्न वाइल्डकार्ड को समान माना जाता है, और शेष महत्वपूर्ण पात्रों की उनके कोड के आधार पर तुलना की जाती है।
गैर-मानक वर्ण हमेशा जंगली-प्रकार के वर्णों की तुलना में छोटे होते हैं और परिणामस्वरूप उच्चतर होते हैं।
इनपुट मास्क में महत्वपूर्ण वर्णों की लंबाई जितनी कम होगी, इनपुट मास्क उतना ही कम और उच्चतर माना जाएगा।

एक उपयुक्त इनपुट मास्क ढूँढना

छंटनी सूची से अगले मुखौटा के साथ इनपुट पाठ की तुलना करते समय, प्रत्येक मुखौटा के केवल महत्वपूर्ण पात्रों को ध्यान में रखा जाता है। यदि स्ट्रिंग इनपुट मास्क से अधिक लंबी है, तो इस तथ्य के बावजूद कि सभी पिछले पात्रों ने परीक्षण पास कर लिया है, इस इनपुट मास्क को अनुपयुक्त माना जाता है। यदि कई इनपुट मास्क इनपुट टेक्स्ट को संतुष्ट करते हैं, तो उनमें से पहला वापस आ जाता है। इसके अलावा, पाया मुखौटा में, सभी महत्वपूर्ण वर्ण (गैर-टेम्पलेट सहित) को एक टेम्पलेट द्वारा प्रतिस्थापित किया जाता है, जो कि किसी भी टेम्पलेट वर्ण द्वारा अनुमत सभी वर्णों का एक संयोजन है।

इवेंट हैंडलिंग और इंटरसेप्शन

इनपुट मास्क के मुख्य कोर के घटना संचालकों के साथ संघर्ष को रोकने के लिए, निम्नलिखित घटनाओं को इंटरसेप्ट किया गया है:

कीडाउन - बैकस्पेस और डिलीट कीस्ट्रोक्स को वर्तमान इनपुट मास्क को बदलने के लिए मॉनिटर किया जाता है इससे पहले कि मुख्य हैंडलर पाठ से एक चरित्र को हटा देता है। इसके अलावा, यह इन्सर्ट कुंजी को दबाने पर नज़र रखता है, जो सिंक्रोनाइज़ेशन के लिए टेक्स्ट इनपुट मोड को बदल देता है।
keypress - चूंकि इनपुट चरित्र मूल इनपुट मास्क द्वारा हल नहीं किया जा सकता है (चूंकि इसमें सभी महत्वपूर्ण वर्ण वाइल्डकार्ड द्वारा प्रतिस्थापित किए गए हैं), आपको अनुमत मास्क में से किसी एक के लिए नई लाइन की जांच करने की आवश्यकता है। यदि इस तरह के मास्क नहीं हैं, तो चरित्र इनपुट को छोड़ दिया जाता है, अन्यथा, इनपुट मास्क को अपडेट किया जाता है, जिसके बाद घटना को कर्नेल हैंडलर को पास किया जाता है।
पेस्ट , इनपुट - क्लिपबोर्ड से पेस्ट टेक्स्ट। प्रसंस्करण को कर्नेल में स्थानांतरित करने से पहले, क्लिपबोर्ड से पाठ चिपकाने के परिणामस्वरूप लाइन के लिए एक इनपुट मास्क का चयन किया जाता है। यदि इनपुट मास्क का चयन नहीं किया जा सकता है, तो अंत से पाठ का एक चरित्र-दर-वर्ण ट्रिमिंग तब तक किया जाता है जब तक कि पाठ कम से कम एक इनपुट मास्क को संतुष्ट नहीं करता। फ़ंक्शन वेल () को कॉल करके इनपुट फ़ील्ड में टेक्स्ट को सही करते समय एक समान ऑपरेशन किया जाता है, साथ ही इनपुट मास्क को इनिशियलाइज़ करते समय, यदि इसे गैर-रिक्त इनपुट फ़ील्ड पर लागू किया जाता है।
ड्रैगड्रॉप , ड्रॉप - प्रोसेसिंग पेस्ट इवेंट के समान है।
धुंधला - अतिरिक्त प्रसंस्करण के मामले में पाठ स्पष्ट मोड चालू है जब फोकस खो जाता है, अगर यह इनपुट मास्क को संतुष्ट नहीं करता है। यह घटना पिछले वाले के विपरीत, मुख्य हैंडलर के बाद पकड़ा गया है।

सभी घटनाओं को इनपुटमस्क स्पेस में गया है। एड-इन को प्रारंभ करने के बाद इनपुटमास्क को कॉल करने पर यह गलत व्यवहार से बचा जाता है (प्रारंभ के दौरान कर्नेल, इनपुटमस्क स्पेस में पहले से स्थापित सभी हैंडलर को हटा देता है)।

उदाहरण का उपयोग करें

मास्क सूची प्रारूप

मास्क की सूची वस्तुओं का एक जावास्क्रिप्ट सरणी है, जो कि गुणों के समान सेट के साथ अधिमानतः है। कम से कम एक संपत्ति जिसमें एक इनपुट मास्क होता है, वह सरणी में सभी वस्तुओं पर मौजूद होना चाहिए। मास्क युक्त पैरामीटर का नाम मनमाना हो सकता है। निम्नलिखित इस तरह के एक सरणी का एक टुकड़ा है:

 [ … { "mask": "+7(###)###-##-##", "cc": "RU", "name_en": "Russia", "desc_en": "", "name_ru": "", "desc_ru": "" }, { "mask": "+250(###)###-###", "cc": "RW", "name_en": "Rwanda", "desc_en": "", "name_ru": "", "desc_ru": "" }, { "mask": "+966-5-####-####", "cc": "SA", "name_en": "Saudi Arabia ", "desc_en": "mobile", "name_ru": "  ", "desc_ru": "" }, { "mask": "+966-#-###-####", "cc": "SA", "name_en": "Saudi Arabia", "desc_en": "", "name_ru": " ", "desc_ru": "" }, … ]

प्लगइन कनेक्शन विकल्प

कनेक्ट करने से पहले, आपको मास्क की सूची को डाउनलोड और सॉर्ट करना होगा। यह निम्नलिखित कार्य करके किया जाता है:

 $.masksSort = function(maskList, defs, match, key)

maskList - उन वस्तुओं की एक सरणी जो इनपुट मास्क को स्टोर करती है (ऑब्जेक्ट का टुकड़ा, ऊपर देखें);
defs - वाइल्डकार्ड वर्णों की एक सरणी (मेरे मामले में, यह एक # वर्ण है);
मैच महत्वपूर्ण पात्रों का वर्णन करने वाली एक नियमित अभिव्यक्ति है (मेरे मामले में, यह /[0-9]|#/ ) है;
कुंजी इनपुट मास्क युक्त सरणी ऑब्जेक्ट का पैरामीटर नाम है।

कनेक्ट होने पर, प्लगइन को एक विशेष ऑब्जेक्ट पास किया जाता है जो इसके संचालन का वर्णन करता है। इस ऑब्जेक्ट में पैरामीटर का निम्नलिखित सेट है:

inputmask - मुख्य inputmask प्लगइन के लिए पारित पैरामीटर युक्त एक वस्तु;
मैच - एक नियमित अभिव्यक्ति जो वाइल्डकार्ड के अपवाद के साथ महत्वपूर्ण पात्रों का वर्णन करती है;
प्रतिस्थापित - एक वाइल्डकार्ड वर्ण जिसमें सभी महत्वपूर्ण वर्ण प्रतिस्थापित किए जाएंगे; इनपुटमास्क की परिभाषा वस्तु में मौजूद नहीं हो सकता है;
सूची - इनपुट मास्क का वर्णन करने वाली वस्तुओं की एक सरणी;
listKey - इनपुट मास्क स्टोर करने वाली ऑब्जेक्ट के अंदर पैरामीटर नाम;
onMaskChange - एक फ़ंक्शन जिसे इनपुट मास्क अपडेट होने पर कहा जाता है; पहले पैरामीटर के रूप में, सरणी से एक ऑब्जेक्ट पास किया जाता है, जिसमें से इनपुट मास्क दर्ज किए गए पाठ से मेल खाता है, और दूसरे पैरामीटर के रूप में, मास्क परिभाषा की सटीकता: सच - इनपुट मास्क पूरी तरह से मेल खाता है, एक विश्वसनीय मुखौटा परिभाषा के लिए अतिरिक्त - अतिरिक्त वर्ण आवश्यक हैं।

प्लगइन को इनिशियलाइज़ करने के लिए, आपको इनपुट फील्ड में इनपुटमास्क विधि लागू करनी होगी:

 $.fn.inputmasks = function(maskOpts, mode)

maskOpts - एक ऑब्जेक्ट जो प्लगइन के संचालन का वर्णन करता है;
मोड - वैकल्पिक; मान वर्तमान में समर्थित है - वर्तमान में समर्थित है, यदि विधि उपयुक्त मास्क के अनुरूप पाठ पूरी तरह से और अन्यथा दर्ज किया गया है, तो विधि true हो जाती true ।

प्लगइन कनेक्शन उदाहरण

 <input type="text" id="customer_phone" value="7" size="25"><br> <input type="checkbox" id="phone_mask" checked> <label id="descr" for="phone_mask"> </label> <script> var maskList = $.masksSort($.masksLoad("phone-codes.json"), ['#'], /[0-9]|#/, "mask"); var maskOpts = { inputmask: { definitions: { '#': { validator: "[0-9]", cardinality: 1 } }, //clearIncomplete: true, showMaskOnHover: false, autoUnmask: true }, match: /[0-9]/, replace: '#', list: maskList, listKey: "mask", onMaskChange: function(maskObj, completed) { if (completed) { var hint = maskObj.name_ru; if (maskObj.desc_ru && maskObj.desc_ru != "") { hint += " (" + maskObj.desc_ru + ")"; } $("#descr").html(hint); } else { $("#descr").html(" "); } $(this).attr("placeholder", $(this).inputmask("getemptymask")); } }; $('#phone_mask').change(function() { if ($('#phone_mask').is(':checked')) { $('#customer_phone').inputmasks(maskOpts); } else { $('#customer_phone').inputmask("+[####################]", maskOpts.inputmask) .attr("placeholder", $('#customer_phone').inputmask("getemptymask")); $("#descr").html(" "); } }); $('#phone_mask').change(); </script>

प्रदर्शन

विकसित प्लगइन के प्रदर्शन का एक उदाहरण परियोजना पृष्ठ पर प्रस्तुत किया गया है ।

फोन नंबर द्वारा इनपुट मास्क का चयन