O JavaScript devo usar para uma entrada de número de telefone em uma página web?

Question

Eu tenho três caixas de entrada para a entrada de um número de telefone em uma página web:

 XXX XXX XXXX

Eu preciso JavaScript que move o usuário entre as caixas enquanto você digita. Após o terceiro personagem, ele se move-lo para a segunda caixa, etc ...

No passado, eu tive problemas com o retrocesso. Quando eu cliquei backspace a partir da segunda caixa, ele me coloca no primeiro, mas depois me atira de volta para o segundo.

Qual é a melhor maneira de fazer isso?

Answer 1

Você deve usar jQuery AutoTab

Exemplo código como este

 <div><strong>Phone Number:</strong></div>
 <input type="text" name="area_code" id="area_code" maxlength="3" size="3" /> -
 <input type="text" name="number1" id="number1" maxlength="3" size="3" /> -
 <input type="text" name="number2" id="number2" maxlength="4" size="5" />


 <script type="text/javascript">
 $(document).ready(function() {
 $('#area_code').autotab({ target: 'number1', format: 'numeric' });
 $('#number1').autotab({ target: 'number2', format: 'numeric', previous: 'area_code'     });
 $('#number2').autotab({ previous: 'number1', format: 'numeric' });
});
</script>

Answer 2

Pessoalmente, eu tinha acabado de aceitar quase qualquer e se preocupar com o lado do servidor que formatação re-. Eu tive que usar tantos formatadores de telefone ruim javascript que eu não sou um grande fã.

Answer 3

Eu sugiro ir com esta solução one-box em vez de três. Ela alivia muitas dores de cabeça e casos de ponta de saltar entre as caixas, e ter a primeira caixa fazer uma .select(), e, em seguida, o usuário pressiona exclusão, e limpa a sua entrada de distância. Nojento.

http://javascript.internet.com/forms/format-phone -number.html

Toda a formatação automática que você poderia querer. Claro, este é o padrão norte-americano, e você teria que modificar isso para RestOfTheWorld.

Answer 4

Eu usaria um ouvinte chave para verificar se há digitação quando o primeiro campo tem foco, contar o número de caracteres já digitou, e se caracteres suficientes foram digitados, mover o foco para o segundo campo, e assim por diante.

Espero que isso ajude,

Yuval = 8 -)