Cosa dovrei usare JavaScript per un telefono entry numero in una pagina web?

Question

Ho tre caselle di input per l'inserimento di un numero di telefono in una pagina web:

 XXX XXX XXXX

Ho bisogno di JavaScript che si muove l'utente tra le scatole durante la digitazione. Dopo il terzo personaggio, che si sposta alla seconda casella, ecc ...

In passato, ho avuto problemi con il backspace. Quando ho cliccato backspace dalla seconda casella, mi mette in un primo momento, ma poi mi spara alla seconda.

Qual è il modo migliore per fare questo?

Answer 1

Si dovrebbe usare jQuery AutoTab

Esempio codice come questo

 <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

Personalmente, mi piacerebbe solo accettare quasi niente e preoccuparsi di ri-formattazione lato server. Ho dovuto usare così tanti cattivi formattatori telefono JavaScript che io non sono un grande fan.

Answer 3

Io suggerirei di andare con questa soluzione one-box invece di tre. Allevia tanti mal di testa e casi limite di rimbalzare tra le scatole, e avere la prima casella fare un .select(), e quindi l'utente preme eliminare e spazza via il loro ingresso. Yucky.

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

Tutti i autoformatting si possa desiderare. Naturalmente, questo è lo standard del Nord America, e che avrebbe dovuto modificare questo per RestOfTheWorld.

Answer 4

mi piacerebbe utilizzare un listener per i tasti per controllare la digitazione, quando il primo campo ha il focus, contare il numero di caratteri già digitati, e se sufficiente di caratteri sono stati digitati, spostare il focus al secondo campo, e così via.

Spero che questo aiuti,

Yuval = 8 -)