Ein Feld mit Sternchen verstecken und ein Eingabeattribut mit dem ursprünglichen Wert setzen

Question

Dies ist tatsächlich Teil 2 einer Frage, die ich zuvor gestellt habe. Ich benutze *, um SSN zu verbergen, wenn der Benutzer einige Ziffern eingibt. Mein Problem ist, dass das Feld als * - - **** zurückkommt, wenn ich das Formular absende. Also dachte ich darüber nach, ein Attribut namens fillSSN zu erstellen, um zu verfolgen, was eingegeben wurde. Meine Herausforderung besteht darin, bestimmte Schlüsselereignisse wie Rückschritt zu verfolgen, das gesamte Feld zu löschen oder zu löschen. Wenn diese Ereignisse eintreten, muss das gefüllteSSN ebenfalls neu erstellt werden. Hier

ist ein jsfiddle Link: jsfiddle link

<script type="text/javascript"> 
$(document).ready(function(){ 

    $('#ssn').keyup(function(e) { 

     var self = $(this); 
     var val = self.val().replace(/[^\d\*]/g, '').replace(/\d/g,'*'); 
     var newVal = ''; 
     var tmpVal = ''; 
     var ssnParts = [3, 2, 4]; 
     var maxSize = 10; 

     for (var i in ssnParts) { 
     if (val.length > ssnParts[i]) { 
      newVal += val.substr(0, ssnParts[i]) + '-'; 
      val = val.substr(ssnParts[i]); 
     } else { 
      break; 
     }  
     } 

     newVal += val; 

     self.val(newVal); 


     console.log("newVal = " + newVal); 
     console.log("whichy which ? " + e.which); 

     if (self.attr("filledSSN").length <= 8) { 
      if (e.keyCode !== 8 || e.keyCode !== 46) { // backspace or delete 
      tmpVal = self.attr("filledSSN") + String.fromCharCode(e.which).replace(/[^\d\*]/g, ''); 
      } else if (self.val().length === 0) { 
      tmpVal = ''; 
      } // else if (e.keyCode === << handle other events gracefully >> 
      self.attr("filledSSN", tmpVal); 
     } 

     console.log("what is the filledSSN attr? = " + self.attr("filledSSN")); 
    }); 

}); 
</script> 

<input type="text" class="form-control" id="ssn" placeholder="ssn" filledSSN="" maxlength="11"> 

Answer 1

ich eine etwas andere Route nehmen endete. Es ist nicht das sauberste, aber es funktioniert für jetzt. Ich wünschte immer noch, ich könnte Ziffern durch Sternchen ersetzen, wie bei Tastenkombinationen, aber ich konnte keine Ereignisse wie Rücktaste verfolgen, Maus markieren und Teile der Eingabe löschen oder alles löschen.

hoffe es hilft jemandem.

$('#ssn').keyup(function(e) { 

     var self = $(this); 
     var val = self.val().replace(/[^\d\*]/g, ''); 
     var newVal = ''; 
     var ssnParts = [3, 2, 4]; 
     var maxSize = 10; 

     for (var i in ssnParts) { 
     if (val.length > ssnParts[i]) { 
      newVal += val.substr(0, ssnParts[i]) + '-'; 
      val = val.substr(ssnParts[i]); 
     } else { 
      break; 
     }  
     } 

     newVal += val; 

     self.val(newVal); 
     self.attr("filledSSN", newVal); 

     console.log("newVal = " + newVal); 
    }); 

    $('#ssn').blur(function() { 

     var self = $(this); 
     var val = self.val().replace(/[^\d\*]/g, '').replace(/\d/g,'*'); 
     var newVal = ''; 
     var tmpVal = ''; 
     var ssnParts = [3, 2, 4]; 
     var maxSize = 10; 

     for (var i in ssnParts) { 
     if (val.length > ssnParts[i]) { 
      newVal += val.substr(0, ssnParts[i]) + '-'; 
      val = val.substr(ssnParts[i]); 
     } else { 
      break; 
     }  
     } 

     newVal += val; 

     self.val(newVal); 

    }); 


    $('#ssn, #reenterSSN').on('focus', function() { 

     $(this).val($(this).attr('filledSSN')); 
    });