इनपुट के समूह को सुविधाजनक कैसे बनाया जाए

जब मैं jotsky.com नोट्स सेवा पर काम कर रहा था, तो ओस्ट्रोवोक में काम करने से पहले, मुझे दो इनपुट से एक फोन नंबर दर्ज करना पड़ा। कुछ इस तरह:



मैंने तीर का उपयोग कर नेविगेशन बनाया। मैंने इसे ऐसा बनाया है कि जैसे ही यह भरता है, फोकस अगले इनपुट पर स्विच करता है। लेकिन मैं क्लिपबोर्ड से सही पेस्ट बनाने में सफल नहीं हुआ।

बफर से सम्मिलन को एक मार्जिन के साथ maxlength विशेषता सेट करके लागू किया जा सकता है। सिटी कोड के लिए, इसका मान कम से कम फोन नंबर की लंबाई होना चाहिए, यानी तीन नहीं, बल्कि दस।

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

वैसे, यह 2008 था, और मैंने जो एकमात्र अवसर देखा वह सब कुछ setTimeout माध्यम से प्रोग्राम करना था। विकास के समय और असंतोषजनक परिणाम की आशंका को देखते हुए, हमने इस फॉर्म को एक में मिला दिया, जो वर्तमान समय तक अपरिवर्तित रहा।

साल बीत गए। ब्राउज़रों ने oninput घटना को लागू किया। समुदाय ने IE में onpropertychange घटना को लोकप्रिय बनाया है। और मुझसे पहले, पहले से ही ओस्ट्रोव्का में, मुझे क्लिपबोर्ड से क्रेडिट कार्ड नंबर के सम्मिलन का एहसास करने का एक कार्य था और उसी समय इसकी वैधता के क्षेत्र के लिए।



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

मिलो jQuery समूह इनपुट - समूह इनपुट के लिए एक प्लगइन।

इनपुट ऐसे व्यवहार करने लगते हैं जैसे कि उनके पास सामान्य डेटा है:
- जगह खत्म होने पर गाड़ी आगे बढ़ती है
- बटन बाएं / दाएं गाड़ी को अगले / पिछले इनपुट पर शिफ्ट करते हैं
- टेक्स्ट को इनपुट द्वारा टेक्स्ट को स्कैटर करता है, इंसर्शन के बाद, कर्सर ऐसा खड़ा होता है मानो वह एक इनपुट हो।

उपयोग उदाहरण:

 <script src="jquery-1.7.2.js"></script> <script src="jquery.groupinputs.js"></script> <input type="text" maxlength="4" class="group1" name=""> <input type="text" maxlength="4" class="group1" name=""> <input type="text" maxlength="4" class="group1" name=""> <input type="text" maxlength="4" class="group1" name=""> <script> $('.group1').groupinputs(); </script> 

गिटहब भंडार ।
डेमो ।

पोस्ट करनेवाले: lusever