Cómo crear un campo de número de teléfono infalible y dar cuenta de copiar/pegar

Me gustaría dividir los campos de mi número de teléfono en 3 campos (código de área, próximos 3, próximos 4). Quiero tener en cuenta algunas condiciones:

  1. Después de que el campo tenga el número especificado de dígitos, el cursor se moverá automáticamente al siguiente campo.
  2. Si un usuario pega su número de teléfono completo en el primer campo, jQuery distribuirá los 10 dígitos en consecuencia.

He conseguido que el #1 funcione, no hay problema: ¿Cómo mover el cursor al siguiente campo automáticamente sin presionar la tecla Tab en Silverlight?

Sin embargo, el n. ° 2 está demostrando estar fuera de mi liga jQuery, por lo que solicito ayuda aquí.

En segundo lugar, me pregunto si estoy pasando por alto algo aquí. No lo creo, pero pensé en tirarlo por ahí.

Debo agregar que he considerado esto: http://digitalbush.com/projects/masked-input-plugin/#demo - pero tiendo a pensar que lo anterior es más agradable para los usuarios... quizás me equivoque.

Noticias - Números de teléfono solo de EE. UU. =).

actualización 2 - Un amigo me envió esto: http://www.mathachew.com/sandbox/jquery-autotab/

preguntado el 12 de junio de 12 a las 20:06

(código de área, próximos 3, próximos 4) — Mis números de teléfono consisten en el código de área y luego 6 dígitos. Sea liberal en lo que acepta. -

También es posible que desee que ignore todas las pulsaciones de teclas no numéricas, ya que el usuario, al no saber cómo funcionará todo esto, probablemente ingresará paréntesis, guiones y/o puntos. -

Lo mantendría todo en un campo de texto. Tres como usted describe va a ser demasiado rígido para los próximos meses. Las reglas están cambiando en los EE. UU. y, además, este formato ni siquiera comienza a abordar los números internacionales. -

@JonathanM: Enlace a los cambios de reglas en los EE. UU., ¿por favor? -

@Quentin, ¿estás en los EE. UU.? Debería decir que esto es solo para EE. UU.... -

2 Respuestas

Algo como esto: tome el valor del campo, elimine los caracteres no numéricos, pruebe la longitud y divídalo si es necesario:

$('#telephone1').on('change',function(e) {
    var $this = $(this),
        phone = $this.val().replace(/\D/g, ''); // remove non-numeric characters
    if (phone.length > 3) {
        $('#telephone3').val(phone.substr(6,4));
        $('#telephone2').val(phone.substr(3,3));
        $('#telephone1').val(phone.substr(0,3));
    } else {
        $('#telephone1').val(phone);
    };
});

http://jsfiddle.net/v6was/

Respondido el 12 de junio de 12 a las 21:06

Oh ok, no me di cuenta de que esto era para ir dentro del otro. 10-4, gracias, creo que se ve bien entonces. - Shackrock

var num = $('.number').html();
var first = num.substr(0,3);
var second = num.substr(3,4);
var third = num.substr(7,4);
var newNum = first + ' ' + second + ' ' + third;
$('.number').html(newNum);

respondido 14 nov., 14:03

Es mejor participar en las preguntas más nuevas que en una que es antigua y ya ha aceptado la respuesta. A veces, la tecnología cambia o las personas tienen algo realmente inteligente para agregar a una pregunta anterior, pero probablemente sabían sobre este tipo de jQuery hace 2 años cuando se hizo esta pregunta ... - Paul

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.