Autoformat SSN al ingresar el número

Question

Tengo un campo de texto y el usuario ingresa el número del SSN. Al ingresar, debe formatear. Al igual que en el cambio de textField ... debe formatear 999-999-999 de esta manera en la pantalla.

Answer 1

<input id="ssn"/> 

<script type="text/javascript"> 
    $('#ssn').keyup(function() { 
     var val = this.value.replace(/\D/g, ''); 
     var newVal = ''; 
     while (val.length > 3) { 
      newVal += val.substr(0, 3) + '-'; 
      val = val.substr(3); 
     } 
     newVal += val; 
     this.value = newVal; 
    }); 
</script> 

Answer 2

El guión de @kottenator era casi allí, pero se degrada el valor de cada 3 dígitos, en lugar de 3, y después 2, como el 000-00-0000 necesidad de números de la Seguridad Social.

Hice una pequeña edición y la modifiqué para que funcione según lo previsto. Espero que esto ayude.

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

Modifiqué un poco la secuencia de comandos de Dennis eliminando los elementos jquery. No estoy seguro de por qué se agregaron las dos primeras cláusulas if, así que las eliminé de esta función. Esta función es un oyente para el SDK Titanium utilizando underscore.js. Pero deberías poder modificarlo para que funcione con otras API de JS.

$.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 4

$('#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 5

@ respuesta de Dennis era el mejor aquí, sin embargo, se utiliza jQuery para hacer el selector y el PO no tener una etiqueta de jQuery en este post, simplemente JavaScript. Aquí está la versión de VanillaJS de la solución (o al menos una forma de hacerlo :)

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