इनपुट में संख्याओं के लिए इनपुट मास्क के लिए प्लगइन

अक्सर कार्य इनपुट क्षेत्र में अक्षरों को दर्ज करने की क्षमता को सीमित करना है। कई स्रोत निम्नलिखित तरीके से ऐसा करने का प्रस्ताव करते हैं, निम्नलिखित कोड के साथ एक कीप इवेंट हैंडलर लटकाएं:
return ((event.keyCode>47)&&(event.keyCode<58)) 

इस पद्धति में कई कमियां हैं, उदाहरण के लिए, उपयोगकर्ता भी अंकों के अंकों, टैब, ऊपर, बाएं आदि में प्रवेश करने में असमर्थ होगा, चाबियाँ ओपेरा में काम नहीं करेंगी।
इसे सही कैसे करें?
लेकिन अच्छे विचार भी हैं, जो यदि पूरा हो जाता है, तो वांछित परिणाम प्राप्त कर सकते हैं।
  function testKey(e) { // Make sure to use event.charCode if available var key = (typeof e.charCode == 'undefined' ? e.keyCode : e.charCode); // Ignore special keys if (e.ctrlKey || e.altKey || key < 32) return true; key = String.fromCharCode(key); return /\d/.test(key); } 

इस कोड के आधार पर, मैंने jQuery प्लगइन लिखने का फैसला किया। लेकिन पहिया को सुदृढ़ नहीं करने के लिए, मैंने तैयार किए गए प्लगइन्स को देखने का फैसला किया, और एक digitalbush.com/projects/masked-input-plugin पाया। वास्तव में अद्भुत प्लगइन, लेकिन मुझे इसकी आवश्यकता थी ताकि मैं क्षेत्र को पूर्णांक या आंशिक संख्याओं के लिए निर्धारित कर सकूं।
और इसलिए, मैंने अपने आप को किन कार्यों के लिए निर्धारित किया है:
  1. फ्लोट, इंट, या नियमित अभिव्यक्ति के प्रकार सेट करें।
  2. फ्लोट प्रकार के लिए विभाजक सेट करें।
  3. विभाजक के पहले और बाद में वर्णों की संख्या निर्धारित करें।
  4. डिफ़ॉल्ट मान यदि उपयोगकर्ता ने संदर्भ मेनू के माध्यम से मान डाला।

जैसा कि पहले उल्लेख किया गया है, जब मैंने एक कुंजी दबाया, मैंने कोड को एक चरित्र में बदल दिया, इसे एक नियमित अभिव्यक्ति के माध्यम से जांचा। यह केवल मामले के लिए प्रदान करने के लिए बनी हुई है यदि उपयोगकर्ता ने संदर्भ मेनू के माध्यम से मूल्य डाला, इसके लिए मैंने हैंडलर को धब्बा घटनाओं पर लटका दिया, जहां मैंने आवश्यक अभिव्यक्ति के माध्यम से जांच की।
हालांकि, जब मैंने सब कुछ जांचना शुरू किया, तो मैंने देखा कि क्या उपयोगकर्ता ने माउस के साथ इनपुट में पाठ का कुछ हिस्सा चुना है। वह एक अनधिकृत चरित्र डाल सकता है, इस नियमित अभिव्यक्ति को दरकिनार कर सकता है, इससे बचने के लिए, मैंने चयनित पाठ (मुझे यहां क्रॉस-ब्राउज़र संगतता से निपटना पड़ा) लिया और शर्तों के अनुसार जांच की।
गीथूब और डेमो पर सूत्र
प्रयुक्त साहित्य:
  1. habrahabr.ru/blogs/javascript/55922
  2. xpoint.ru/know-how/JavaScript/PoleznyieFunktsii?38#Fil 'trVvodaDlyaTekstovogoPolya


Source: https://habr.com/ru/post/In136720/


All Articles