Autoformat SSN while entering the number

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

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

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>

@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;
};