Giriş Alanında Kısmi Şifre Maskeleme

Question

SSN # giriş alanını maskelemem gerekiyor, ssn'nin 123-45-6789 olduğunu söyleyeyim, ***-**-6789 (her rakamı girdiğinde gerçek zaman) göstermem gerekiyor, ancak yine de orijinal değeri korumam gerekiyor göndermek için

Kullanıcı kesinlikle değeri girdiyse ancak kullanıcının silme gibi başka bir şey yapması veya imleci rasgele bir konuma taşıması ve bir sayı eklediğinde/silmesi durumunda kopyalama yapması durumunda bunu yapabildiğim noktaya geldim./silme, vb. Bu işi yapmak için bir sürü etkinliği gerçekten dinlemek istemiyorum.

Ayrıca, gerçek ssn şeffaf/gizli olsa da maskelenmiş ssn görüntülemek için giriş alanının üstüne bir div oturup denedim ama yine de/delete/delete/paste/ekleme/ekleme yapabilmek için işlevlerini kaybeder Rastgele parçalarda (diğer ucunda başladıkları zaman) ve ayrıca imleç ssn sayısının sonuna kadar tamamen senkronize edilmez (yıldız işareti büyüklükteydi). Bu, bazı mobil tarayıcılarda da kırdı.

Ayrıca, birbirinin yanında iki ayrı giriş alanı, tek bir parola ve bir tür metin oturtmayı düşündüm, ancak yine vurgulamak ve silmek/ikisi arasında yapıştırarak bir sorun olur.

İdeal olarak, bir giriş alanının iki türünün olması için bir şey varsa, değerin bir kısmı tip parolası ve kalanı yazı tipi olabilir, bu harika olur. Btw bu tepki js uygulaması içindir.

TLDR: Ssn'nin yalnızca ilk 5 basamağında parola maskeleme yapacak ve son 4 basamak için düz metin olacak tam işlevli bir giriş alanına gereksiniminiz var (gönderim için tam metin değerine sahipken).

Teşekkürler!

Answer 1

Bu, biraz özensiz olabilir, ancak istediğiniz gibi çalışır, tek bir metin alanındadır, tam doğru SSN'yi döndürür (ilk 5 değeri, mermi noktaları ile değiştirmesine rağmen) ve herhangi bir yerde düzenleme yapılmasına izin verir. alan. Esasen

<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>

, giriş değiştiğinde her zaman, daha önce ilk 5 maçları olmadığını denetler ve bunları yapmazsa, bu gerekli karakterleri güncelleyecektir.

Answer 2

3 farklı alan kullanabilir ve ardından şifre alanlarını yapabilirsiniz.

Türlerini metne ve bunları parola ile değiştiren bir bulanıklık işleyicisine dönüştüren bir odak işleyicisi ekleyin.

Sunumdan veya sunucudan önce bunları birleştirebilirsiniz.

#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>

Ayrıca ilk alana yapıştırılır için tüm SSN'nizin bir geçiş işleyicisi yazmak ve tüm üç alan set olsun sahip olabilir.

Tek bir tam metin kutusuyla çalışmadığınız sürece ve kullanıcıya alanı maskeleme ve maskesini kaldırma imkanı vermediğiniz sürece, bu en yakın yoldur. Üretim uygulamalarda

, bu aslında yaklaşım Attığım: Maskeli

: Deşifre

:

Sen odaklanmış/puslu fonksiyonlarını kendi uygulayabilirsiniz alanı otomatik olarak maskesini kaldırmak/maskelemek.