CFNinja CFNinja - 6 months ago 15
jQuery Question

Hiding a field with asterisk and setting an input attribute with the original value

This is actually part 2 of a question that I asked previously. I am using * to hide SSN as user enters some digits. My problem is that the field comes back as *--**** when I submit the form. So, I thought about creating an attribute called filledSSN in order to track what was entered. My challenge is to track certain key events like backspace, delete or deleting the whole field. When these events happen, the filledSSN needs to be recreated as well.

Here is a 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

I ended up taking a slightly different route. It is not the cleanest but it works for now. I still wish I could replace digits with asterisks as on keyup, but I couldn't track events like backspace, mouse highlight and delete parts of the input or delete all.

hope it helps to someone.

$('#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'));
  });
Comments