Autoformat SSN while entering the number

Question

I have a textfield and the user enters the SSN number. While entering itself it should format. Like On the change of the textField... it should format 999-999-999 in this way on the display itself.

Answer 1

The script from @kottenator was almost there, but it breaks the value every 3 digits, instead of 3, then 2, like the 000-00-0000 needed for Social Security numbers.

I did a little editing and modified it to work as intended. Hope this helps.

    <script type="text/javascript">
       $('#ssn1').keyup(function() {
          var val = this.value.replace(/\D/g, '');
          var newVal = '';
          if(val.length > 4) {
             this.value = val;
          }
          if((val.length > 3) && (val.length < 6)) {
             newVal += val.substr(0, 3) + '-';
             val = val.substr(3);
          }
          if (val.length > 5) {
             newVal += val.substr(0, 3) + '-';
             newVal += val.substr(3, 2) + '-';
             val = val.substr(5);
           }
           newVal += val;
           this.value = newVal.substring(0, 11);
        });
    </script>

Answer 2

<input id="ssn"/>

<script type="text/javascript">
    $('#ssn').keyup(function() {
        var val = this.value.replace(/\D/g, '');
        val = val.replace(/^(\d{3})/, '$1-');
        val = val.replace(/-(\d{2})/, '-$1-');
        val = val.replace(/(\d)-(\d{4}).*/, '$1-$2');
        this.value = val;
    });
</script>

Answer 3

@Dennis's answer was the best here, however it used JQuery to do the selector and the OP did not have a JQuery tag on this post, just JavaScript. Here is the VanillaJS version of the solution (or at least one way to do it :)

document.getElementById("ssn").onkeyup = function() {
  var val = this.value.replace(/\D/g, '');
  var newVal = '';

  if(val.length > 4) {
    this.value = val;
  }

  if((val.length > 3) && (val.length < 6)) {
    newVal += val.substr(0, 3) + '-';
    val = val.substr(3);
  }

  if (val.length > 5) {
    newVal += val.substr(0, 3) + '-';
    newVal += val.substr(3, 2) + '-';
    val = val.substr(5);
  }

  newVal += val;
  this.value = newVal;
};

Answer 4

@Rost's answer is a great start, but had three flaws. In this answer I've fixed two of them. Flaws:

1. When you try to delete a '-' it immediately reappeared. That's fixed.
2. When the user types something wrong, the wrong text was there for a second before going away. That's also fixed.
3. When you change the text in any way, the cursor moves to the end of the text. That's still a problem.

https://stackoverflow.com/a/3288215/3791179 is the best suggestion I've found to try to fix that last problem. It doesn't work here, though, because we're changing how many characters are in the value. I haven't worked out the math to make it work properly yet. If I do, I'll edit this answer.

<input id="ssn"/>

<script type="text/javascript">
  $( "#ssn" ).on("input", function() {
    var val = this.value.replace(/\D/g, '');
    val = val.replace(/^(\d{3})(\d{1,2})/, '$1-$2');
    val = val.replace(/^(\d{3})-(\d{2})(.+)/, '$1-$2-$3');
    this.value = val.substring(0, 11);
  });
</script>

I don't think the input event is supported in all versions of all browsers. You can use the keyup event instead, but I can't find info on how many browsers support that. If you do, problem #2 will come back, but that might be fine. Some users might find it helpful to see what they're doing wrong.

Answer 5

@knod has the best answer here, but their solution had a drawback where folks couldn't type in their own dashes.

I modified their answer to allow users to (optionally) type or delete their own dashes and avoid blocking valid input (and added some comments to explain each step).

function formatSSN(ssn) {
  // remove all non-dash and non-numerals
  var val = ssn.replace(/[^\d-]/g, '');

  // add the first dash if number from the second group appear
  val = val.replace(/^(\d{3})-?(\d{1,2})/, '$1-$2');

  // add the second dash if numbers from the third group appear
  val = val.replace(/^(\d{3})-?(\d{2})-?(\d{1,4})/, '$1-$2-$3');

  // remove misplaced dashes
  val = val.split('').filter((val, idx) => {
    return val !== '-' || idx === 3 || idx === 6;
  }).join('');

  // enforce max length
  return val.substring(0, 11);
}

// bind our function
document.getElementById("ssn").onkeyup = function(e) {
  this.value = formatSSN(this.value);
}

Answer 6

I modified Dennis' script a bit removing the jquery elements. Not sure why the first two if clauses were added, so I removed them from this function. This function is a listener for the Titanium SDK using underscore.js. But you should be able to modify it to work with other JS API's.

$.usernameField.addEventListener('blur', function(param) {

    var inputString = param.value;

    if (inputString.length === 9 && _.isNumber(parseInt(inputString, 10))) {

        var val = inputString.replace(/\D/g, '');

        var outputString = '';

        outputString += val.substr(0, 3) + '-';
        outputString += val.substr(3, 2) + '-';
        val = val.substr(5);
        outputString += val;

        $.usernameField.value = outputString;

    }
});

Answer 7

$('#ssn').keyup(function() {
    var val = this.value.replace(/\D/g, '');
    var newVal = '';
    var sizes = [3, 2, 4];

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

    newVal += val;
    this.value = newVal;
});

Answer 8

try this:

try {
    this.value = this.value.replace(/\D/g, '').match(/(\d{1,3})(\d{1,2})?(\d{1,4})?/).slice(1, 4).filter(el=>!!el).join('-'));
}catch{}