Solución:
Ya que está usando jQuery, puede probar jquery masked-input-plugin.
Hay un jsFiddle para ti aquí donde puedes ver cómo funciona.
El código fuente del proyecto en GitHub se puede encontrar aquí.
La implementación es más que simple:
HTML:
<input id="ssn"/>
javascript:
$("#ssn").mask("999-999-999");
ACTUALIZAR:
Otro bueno se puede encontrar aquí.
Por lo que puedo hacer, todo lo que realmente necesitas hacer es esto:
$('#ssn').keyup(function()
{
this.value = this.value.replace(/(d{3})-?/g,'$1-');
});
pero esto solo funcionará cuando las personas ingresen dígitos, por lo que sugiero que introduzcas una verificación adicional:
$('#ssn').keyup(function(e) {
if ((e.keyCode > 47 && e.keyCode < 58) || (e.keyCode < 106 && e.keyCode > 95)) {
this.value = this.value.replace(/(d{3})-?/g, '$1-');
return true;
}
//remove all chars, except dash and digits
this.value = this.value.replace(/[^-0-9]/g, '');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="ssn">
Un poco más sobre la expresión regular /(d{3})-?/g
:
Esto reemplaza el grupo de 3 dígitos con él mismo, seguido de un guión. Los corchetes crean una referencia posterior a los dígitos coincidentes, que se usa en la cadena de reemplazo ($1-
-> $ 1 es la referencia posterior).
Tenga en cuenta que también se reemplaza un tablero opcional, pero no se incluye en la referencia posterior. si la entrada es 123
, y el patrón de reemplazo sería algo así como /(d{3})/g
, o /(d{3}-?)/g
el valor se convertiría en 123-4
, 123--45
, 123---456
y así sucesivamente, duplicando los guiones cada vez.
Advertencia:
Esto le dará un poco de dolor al usuario, ya que las teclas de flecha y demás no funcionarán. Afortunadamente, es una solución fácil: simplemente agregue el siguiente código en la parte superior de su función:
if (e.keyCode > 36 && e.keyCode < 41)
{
return true;
}
Y las flechas funcionan bien. para otras teclas (como eliminar, retroceder, cambiar, etc.) consulte esta página.
Para un ejemplo completo: aquí está el violín