एक साधारण फोन नंबर पिकर कैसे बनाएं

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

सेवा मेरे उपयोगकर्ता इनपुट त्रुटियों को कम करें और अपनी साइट के उपयोगकर्ता अनुभव में सुधार, आप एक बना सकते हैं जीयूआई यह उपयोगकर्ताओं को जल्दी से अपना फोन नंबर दर्ज करने की अनुमति देता है, एक तरह से तारीख लेने वालों के समान.

इस ट्यूटोरियल में, आप देखेंगे कि कैसे एक इनपुट क्षेत्र में एक साधारण फोन नंबर पिकर जोड़ें. हम GUI में जाने के लिए HTML5, CSS3 और JavaScript का उपयोग करेंगे जिसे आप नीचे डेमो में देख सकते हैं और परीक्षण कर सकते हैं। हम यह सुनिश्चित करने के लिए कि उपयोगकर्ता वास्तव में एक वैध फ़ोन नंबर दर्ज करते हैं, हम नियमित रूप से उपयोग में डालेंगे.

1. फ़ोन नंबर फ़ील्ड बनाएँ

प्रथम, एक इनपुट फ़ील्ड बनाएं दाईं ओर एक डायल आइकन के साथ जो क्लिक करने पर डायल स्क्रीन खुलेगा। डायल आइकन केवल 9 ब्लैक बॉक्स की तरह दिखता है, 3 द्वारा 3 की व्यवस्था की गई है, जो आपको एक नियमित फोन पर दिखाई देता है.

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

2. डायल स्क्रीन बनाएं

डायल स्क्रीन है संख्याओं का एक ग्रिड 0 से 9 के साथ साथ कुछ विशेष पात्र। इसके साथ बनाया जा सकता है या तो एक HTML

यहां, मैं आपको दिखाऊंगा कि जावास्क्रिप्ट में डायल स्क्रीन टेबल कैसे बनाया जाता है। यदि आप इसे इस तरह से पसंद करते हैं, तो आप निश्चित रूप से तालिका को सीधे HTML स्रोत कोड में जोड़ सकते हैं.

सबसे पहले, एक नया बनाएँ 'तालिका' में तत्व डोम का उपयोग करके createElement () तरीका। यह भी दे दो 'डायल' पहचानकर्ता.

 / * डायल स्क्रीन बनाएं / / var डायल = document.createElement ('तालिका'); डायल.ड = 'डायल'; 

एक जोड़ें के लिये पाश इसके साथ डायल तालिका की चार पंक्तियों को सम्मिलित करने के लिए। फिर, प्रत्येक पंक्ति के लिए, दूसरा चलाओ के लिये पाश प्रति पंक्ति तीन कोशिकाओं को जोड़ने के लिए. प्रत्येक कोशिका को चिह्नित करें उसके साथ 'DialDigit' कक्षा.

 के लिए (var rowNum = 0; rowNum; < 4; rowNum++)  var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++)  var cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();   

दो के लिये ऊपर दिए गए लूप डायल टेबल की कोशिकाओं में जाने वाले अंकों की गणना करते हैं - के मान cell.textContent संपत्ति - निम्नलिखित तरीके से:

 (colNum + 1) + (rowNum * 3) / * पहली पंक्ति * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + () 0 * 3) = 3 / * दूसरी पंक्ति * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * आदि * / 

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

डायल स्क्रीन पर अंतिम पंक्ति बनाने के लिए, निम्नलिखित जोड़ें अगर भीतर का बयान के लिये पाश.

 के लिए (var rowNum = 0; rowNum; < 4; rowNum++)  var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++)  /* if last row */ if (rowNum === 3)  cell = row.insertCell(colNum); cell.textContent = '-'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '0'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '+'; cell.className = 'dialDigit'; break;  cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();   

डायल स्क्रीन अब पूरी हो गई है, इसे जोड़ें #dialWrapper HTML कंटेनर जिसका उपयोग करके आपने चरण 1 में बनाया है दो डोम तरीके:

1. querySelector () करने की विधि कंटेनर का चयन करें
2. अपेंड चाइल्ड() करने की विधि डायल स्क्रीन संलग्न करें - में आयोजित डायल चर - कंटेनर के लिए

 document.querySelector ( '# dialWrapper') appendChild (डायल)। 

3. डायल स्क्रीन शैली

इसे और अधिक आकर्षक बनाने के लिए, डायल स्क्रीन शैली सीएसएस के साथ.

जरूरी नहीं कि आपको मेरी स्टाइल से चिपके रहना है, लेकिन इसे भूलना नहीं है जोड़ना उपयोगकर्ता के चयन: कोई नहीं; के लिए संपत्ति #dial पात्र ताकि जब उपयोगकर्ता अंक, पाठ पर क्लिक कर रहा हो कर्सर द्वारा चयनित नहीं किया जाएगा.

 #dial चौड़ाई: 200px; ऊंचाई: 200 पीएक्स; सीमा-पतन: पतन; पाठ-संरेखण: केंद्र; स्थिति: रिश्तेदार; -ms-user-select: कोई नहीं; -webkit-user-select: कोई नहीं; -मोज़-उपयोगकर्ता-चयन: कोई नहीं; उपयोगकर्ता-चयन: कोई नहीं; रंग: # 000; बॉक्स-छाया: 0 0 6px # 999;  .DialDigit सीमा: 1px ठोस #fff; कर्सर: सूचक; पृष्ठभूमि-रंग: rgba (255,228,142, .7);  

4. क्लिक पर डायल स्क्रीन दिखाएं

सबसे पहले, जोड़ें visibility: hidden; करने के लिए शैली नियम #dial उपरोक्त सीएसएस में सेवा मेरे डायल स्क्रीन छिपाएँ डिफ़ॉल्ट रूप से। यह केवल तब दिखाया जाएगा जब उपयोगकर्ता डायल आइकन पर क्लिक करेगा.

फिर, डायल आइकन पर एक क्लिक ईवेंट हैंडलर जोड़ें जावास्क्रिप्ट के साथ सेवा मेरे दृश्यता को टॉगल करें डायल स्क्रीन के.

ऐसा करने के लिए, आपको उपर्युक्त का उपयोग करने की आवश्यकता है querySelector () और यह addEventListener () तरीकों। बाद वाला एक क्लिक ईवेंट देता है डायल आइकन पर जाएं और कस्टम को कॉल करें toggleDial () समारोह.

toggleDial () समारोह दृश्यता को बदलता है डायल स्क्रीन के लिए छिपा से दृश्यमान, और वापस.

 document.querySelector ('# dialIcon')। addEventListener ('क्लिक', toggleDial); function toggleDial () dial.style.visibility = dial.style.visibility === 'hidden' || Dial.style.visibility === "? 'दृश्यमान': 'छिपा हुआ' ;; 

5. कार्यशीलता जोड़ें

एक कस्टम फ़ंक्शन जोड़ें फोन नंबर क्षेत्र में इनपुट अंक डायल स्क्रीन की कोशिकाओं के क्लिक पर.

नंबर डायल करें() समारोह एक-एक करके अंकों को जोड़ता है को textContent के साथ चिह्नित इनपुट क्षेत्र की संपत्ति #फोन नंबर पहचानकर्ता.

 phoneNo = document.querySelector ('# phoneNo'); फ़ंक्शन डायलनंबर () phoneNo.value + = this.textContent;  DialDigits = document.querySelectorAll ('। dialDigit'); के लिए (var i = 0; मैं; < dialDigits.length; i++)  dialDigits[i].addEventListener('click', dialNumber);  

अब, आपके पास ए काम डायल स्क्रीन इनपुट फोन नंबर क्षेत्र के लिए.

सीएसएस के साथ रखने के लिए, उनके अंकों के पृष्ठभूमि का रंग बदलें : मंडराना तथा : सक्रिय (जब उपयोगकर्ता उस पर क्लिक करता है) कहता है.

 .डायलडिजिट: होवर पृष्ठभूमि-रंग: आरजीबी (255,228,142);  .dialDigit: सक्रिय पृष्ठभूमि-रंग: # FF6478;  

6. रेगुलर एक्सप्रेशन वैलिडेशन जोड़ें

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

आप मेरे रेगुलर एक्सप्रेशन के विज़ुअलाइज़ेशन को नीचे दी गई डिबगेज़ ऐप के साथ स्क्रीनशो पर देख सकते हैं.

आप अपने देश या क्षेत्र के फ़ोन नंबर प्रारूप के अनुसार फ़ोन नंबर को मान्य कर सकते हैं.

एक नया रेगुलर एक्सप्रेशन ऑब्जेक्ट बनाएँ, और इसे स्टोर करें पैटर्न चर। साथ ही एक रिवाज भी बनाएं मान्य () फ़ंक्शन जो कि दर्ज किए गए फ़ोन नंबर की जांच करता है नियमित अभिव्यक्ति का अनुपालन करता है, और अगर यह है कम से कम 8 अक्षर लंबे.

जब इनपुट मान्य नहीं करता है, तो मान्य () समारोह की जरूरत है प्रतिक्रिया दें उपयोगकर्ता के लिए.

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

 पैटर्न = नया RegExp ("^ (\\ + \\ d 1,2); (\\ d + \\ - * \\ d +) * $"); फ़ंक्शन मान्य (txt) // वैध फ़ोन नंबर के लिए कम से कम 8 अक्षर। if (pattern.test (txt) || txt.length < 8)  phoneNo.style.border = '2px solid red'; return false;  else phoneNo.style.border = 'initial'; return true;  

7. सत्यापन करें

मान्य () कार्यों बुलाया जाना चाहिए सत्यापन करने के लिए। से बुलाओ नंबर डायल करें() मान के सत्यापन के लिए चरण 5 में आपके द्वारा बनाया गया कार्य फोन नंबर परिवर्तनशील.

ध्यान दें कि मैंने भी एक जोड़ा अतिरिक्त सत्यापन अधिकतम वर्णों के लिए (15 से अधिक नहीं हो सकता है) a का उपयोग करके अगर बयान.

 फ़ंक्शन डायलनंबर () var val = phoneNo.value + this.textContent; // अधिकतम वर्णों की अनुमति, 15 यदि (val.length> 15) झूठे लौटते हैं; मान्य (वैल); phoneNo.value = val;  

तुंहारे फोन नंबर लेने वाला अब तैयार है, नीचे अंतिम डेमो देखें.

कैक्टस [OS X] का उपयोग करके एक स्टेटिक ब्लॉग कैसे बनाएँ

एक मजबूत पासवर्ड कैसे बनाएं (और इसे याद रखें)

विंडोज में अपने DNS सर्वर को बदलने के लिए एक शॉर्टकट कैसे बनाएं

अगला लेख

विंडोज 7 में एक सॉफ्टवेयर RAID ऐरे कैसे बनाएं

पिछला लेख

विंडोज 10 में विंडोज अपडेट के लिए एक शॉर्टकट कैसे बनाएं