इनपुट फ़ील्ड पर आंशिक पासवर्ड मास्किंग

Question

इसलिए मुझे एक एसएसएन # इनपुट फ़ील्ड मास्क करने की आवश्यकता है, मान लें कि एसएसएन 123-45-6789 है, मुझे ***-**-6789 प्रदर्शित करने की आवश्यकता है (वास्तविक समय के रूप में वे प्रत्येक अंक दर्ज करते हैं) लेकिन मुझे अभी भी मूल मूल्य को बनाए रखने की आवश्यकता है जमा करना।

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

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

मैंने दो अलग-अलग इनपुट फ़ील्ड्स, एक प्रकार का पासवर्ड, और एक प्रकार का पाठ एक-दूसरे के बगल में बैठने का भी सोचा, लेकिन फिर दोनों के बीच हाइलाइटिंग और हटाना/पेस्ट करना एक मुद्दा होगा।

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

टीएलडीआर: एक पूरी तरह से कार्यात्मक इनपुट फ़ील्ड की आवश्यकता है जो एसएसएन के पहले 5 अंकों पर पासवर्ड मास्किंग करेगी और पिछले 4 अंकों के लिए सादे टेक्स्ट बनें (जबकि पूर्ण सादा टेक्स्ट मूल्य जमा करने के लिए उपलब्ध है)।

धन्यवाद!

Answer 1

यह थोड़ा सा मैला हो सकता है, लेकिन यह काम करता है जैसा कि आप चाहते हैं, सभी एक टेक्स्ट फ़ील्ड में हैं, पूर्ण सटीक एसएसएन लौटाते हैं (बुलेट पॉइंट्स के साथ पहले 5 मानों को बदलने के बावजूद), और कहीं भी संपादन के लिए अनुमति देता है खेत।

<input type="password" id="ssn" maxlength=9 /> 
 

 
<script> 
 
    var ssn = document.getElementById('ssn'); 
 
    ssn.addEventListener('input', ssnMask, false); 
 
    var ssnFirstFive = ""; 
 
    var secondHalf = ""; 
 
    var fullSSN = ""; 
 

 
    function ssnMask(){ 
 
     if (ssn.value.length <= 5){ 
 
      ssn.type = 'password'; 
 
     } 
 
     else{ 
 
      detectChanges(); 
 
      secondHalf = ssn.value.substring(5); 
 
      ssn.type = 'text'; 
 
      ssn.value = "•••••"; 
 
      ssn.value += secondHalf; 
 
      fullSSN = ssnFirstFive + secondHalf; 
 
     } 
 
    } 
 

 
    function detectChanges() { 
 
     for (var i = 0; i < 5; i++){ 
 
      if (ssn.value[i] != "•"){ 
 
       ssnFirstFive = ssnFirstFive.substring(0, i) + ssn.value[i] + ssnFirstFive.substring(i+1); 
 
      } 
 
     } 
 
    } 
 
</script>

अनिवार्य रूप से, हर बार इनपुट बदल गया है, यह अगर यह पहले से पहले 5 से मेल खाता है देखने के लिए जाँच करता है, और अगर ऐसा नहीं होता है, यह आवश्यक पात्रों अद्यतन करेगा।

Answer 2

आप 3 अलग-अलग फ़ील्ड का उपयोग कर सकते हैं और फिर पासवर्ड फ़ील्ड बना सकते हैं।

एक फोकस हैंडलर जोड़ें जो उनके प्रकार को टेक्स्ट और ब्लर हैंडलर में बदल देता है जो उन्हें पासवर्ड पर वापस बदल देता है।

आप जमा करने से पहले या सर्वर पर उन्हें जोड़ सकते हैं।

#ssn1{width:25px;} 
 
#ssn2{width:20px;} 
 
#ssn3{width:35px;}

<input type="password" name="ssn" maxlength=3 id="ssn1" /> 
 
<input type="password" name="ssn" maxlength=2 id="ssn2"/> 
 
<input type="password" name="ssn" maxlength=4 id="ssn3"/> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
    $('[name="ssn"]').focus(function() { 
 
    $(this).attr("type", "text") 
 
    }); 
 
    $('[name="ssn"]').blur(function() { 
 
    $(this).attr("type", "password") 
 
    }); 
 
</script>

तुम भी सब एक पूर्ण एसएसएन का पास हैंडलर पहले क्षेत्र में चिपकाया जाए लिख सकते हैं और सभी तीन क्षेत्रों तैयार हो जाओ हो सकता है।

यह सबसे निकटतम है जब तक आप एक पूर्ण टेक्स्ट बॉक्स के साथ काम नहीं करते हैं और उपयोगकर्ता को मास्क करने और क्षेत्र को अनमास्क करने की क्षमता देते हैं।

उत्पादन ऐप्स में, यह वास्तव में दृष्टिकोण मैं ले:

नकाबपोश:

बेपर्दा:

आप फोकस/कलंक कार्यों के मालिक हैं लागू कर सकते हैं आवश्यकतानुसार फ़ील्ड को स्वचालित रूप से अनमास्क/मास्क करने के लिए।