Número de teléfono de formato automático en Jquery

Question

Tengo un cuadro de texto para el número de teléfono. Mi número de teléfono debe ser XXX-XXX-XXX como este formato.

Recibí la solución para el formato XXX-XXX-XXX, pero no sé cómo modificar ese código.

$('#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; 
}); 

http://jsfiddle.net/ssthil/nY2QT/

Answer 1

Dado que está utilizando jQuery puede probar jQuery masked-input-plugin.

Hay un jsFiddle para usted here donde puede ver cómo funciona.

El código fuente para el proyecto en GitHub se puede encontrar en here.

La implementación es más sencilla:

HTML:

<input id="ssn"/> 

javascript:

$("#ssn").mask("999-999-999"); 

ACTUALIZACIÓN:

Otra buena se puede encontrar here.

Answer 2

Por lo que yo puedo hacer ejercicio, lo único que tiene que hacer es esto:

$('#ssn').keyup(function() 
{ 
    this.value = this.value.replace(/(\d{3})\-?/g,'$1-'); 
}); 

pero esto sólo funcionará cuando las personas entran dígitos, por lo que me gustaría sugerir una introducción de una comprobació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 en la expresión regular /(\d{3})\-?/g:
Esto reemplaza grupo de 3 dígitos consigo mismo, seguido de un guión. Los corchetes crean una referencia a los dígitos coincidentes, que se utiliza en la cadena de reemplazo ($1- -> $ 1 es la referencia posterior).
Tenga en cuenta que un guión opcional también se reemplaza, pero no se incluye en la referencia anterior. 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, doblando los guiones cada vez.

Advertencia:
Esto le dará al usuario una cierta pena, ya que las teclas de flecha y así no se work.Luckily, que es una solución fácil: Sólo tiene que añadir 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, retroceso, desplazamiento, etc.) check this page.

Para un ejemplo completo: here's the fiddle

Answer 3

Puede configurar la máscara de entrada en cualquier campo en 3 sencillos pasos:

1: En primer lugar llaman a estas bibliotecas http://code.jquery.com/jquery-1.7.2.min.js " " https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js "

2: Cree una forma simple como esta:

<form> <input type="text" name="phone" id="phone" /> </form> 

3: A continuación, el código de script pasado en su etiqueta script ..

$ (document) ready (function ($) {

$('#phone').mask("99999-9999999-9",{placeholder:""}); 

});

Answer 4

$('#ssn').keyup(function() { 
 
     var val = this.value.replace(/\D/g, ''); 
 
     var newVal = ''; 
 
     for(i=0;i<2;i++){ 
 
     if (val.length > 3) { 
 
      newVal += val.substr(0, 3) + '-'; 
 
      val = val.substr(3); 
 
     } 
 
     } 
 
     newVal += val; 
 
     this.value = newVal; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="ssn" maxlength="10"/>