Saltar al contenido

Formato automático de número de teléfono en Jquery

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

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *