Какой JavaScript я должен использовать для ввода номера телефона на веб-странице?

Question

У меня есть три поля для ввода номера телефона на веб-странице:

 XXX XXX XXXX

Мне нужен JavaScript, который перемещает пользователя между полями при вводе. После третьего персонажа он перемещает вас во второе поле и т.д ...

В прошлом у меня были проблемы с возвратом. Когда я щелкаю клавишу «Backspace» во втором блоке, он помещает меня в первый, но затем возвращает меня во второй.

Каков наилучший способ сделать это?

Answer 1

Вы должны использовать jQuery AutoTab

Пример код вроде этого

 <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

Лично я бы просто принял почти что угодно и побеспокоился бы о переформатировании на стороне сервера. Мне пришлось использовать так много плохих форматировщиков javascript, что я не большой поклонник.

Answer 3

Я бы использовал ключевой слушатель для проверки ввода, когда первое поле имеет фокус, подсчитал количество уже набранных символов, и если набрано достаточное количество символов, переместил фокус на второе поле и так далее.

Надеюсь, это поможет,

Ювал = 8 -)

Answer 4

Я бы предложил использовать одно решение вместо трех. Это избавляет от многих головных болей и крайних случаев отскока между блоками, а первый блок делает .select(), а затем пользователь нажимает кнопку удаления и стирает свои записи. Yucky.

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

Все автоформатирование, которое вы могли захотеть. Конечно, это североамериканский стандарт, и вам придется изменить его для RestOfTheWorld.