我应该在网页中使用哪些JavaScript来输入电话号码？

I have three input boxes for entering a telephone number on a webpage:

我有三个输入框用于在网页上输入电话号码:

 XXX XXX XXXX

I need JavaScript that moves the user between the boxes as you type. After the third character, it moves you to the second box, etc...

我需要JavaScript,在您键入时在用户之间移动用户。在第三个字符之后,它会移动到第二个框,等等......

In the past, I've had trouble with the backspace. When I clicked backspace from the second box, it puts me in the first, but then shoots me back to the second.

在过去,我遇到了退格问题。当我从第二个方框中点击退格键时,它会让我进入第一个区域,然后再将我射回第二个区域。

What is the best way to do this?

做这个的最好方式是什么?

4 个解决方案

#1

You should use jQuery AutoTab

你应该使用jQuery AutoTab

Example code like this

像这样的示例代码

 <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>

#2

Personally, I'd just accept almost anything and worry about re-formatting it server-side. I've had to use so many bad javascript phone formatters that I'm not a big fan.

就个人而言,我只是接受几乎任何事情,并担心重新格式化服务器端。我不得不使用这么多糟糕的javascript手机格式化程序,我不是一个大粉丝。

#3

I'd suggest going with this one-box solution instead of the three. It relieves so many headaches and edge cases of bouncing between boxes, and having the first box do a .select(), and then the user hits delete, and wipes their entry away. Yucky.

我建议使用这个单盒解决方案,而不是三个。它减轻了许多令人头疼的问题,并在盒子之间弹跳边缘,并让第一个盒子执行.select(),然后用户点击删除,并擦除它们的输入。令人讨厌。

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

All the autoformatting you could want. Of course, this is the North American standard, and you'd have to modify this for RestOfTheWorld.

您可能需要的所有自动装配。当然,这是北美标准,你必须为RestOfTheWorld修改它。

#4

I'd use a key listener to check for typing when the first field has focus, count the number of characters already typed, and if enough characters have been typed, move the focus to the second field, and so on.

当第一个字段有焦点时,我会使用一个键监听器来检查输入,计算已输入的字符数,如果键入了足够的字符,则将焦点移动到第二个字段,依此类推。

Hope this helps,

希望这可以帮助,

Yuval =8-)

#1