HTML文本框可接受电话号码,并以美国电话号码格式显示。

3

我在限制文本框只能输入数字方面找到了很多帮助,但我想知道是否有可能以美国电话号码格式显示文本框。

例如:

( _ _ _ ) _ _ _ - _ _ _ _

请帮忙。


4
说实话?你最好的方法是允许用户按照他们喜欢的方式输入电话号码,然后在"onblur"事件中去除所有“填充”字符并重新格式化。强制用户按照模板输入是困难的,会破坏正常的编辑并且是意外的。不要让你的用户感到惊讶。 - Jeremy J Starcher
+1 Jeremy。如果需要特定格式,应该通过屏幕提示或提示来建议,而不是强制用户修改他们选择输入数据的方式。 - RobG
2个回答

0

美国的电话号码方案(忽略国家代码部分)是:

[2-9][0-9][0-9] [2-9][0-9][0-9] [0-9][0-9][0-9][0-9]

可以向用户建议类似以下内容:

<table>
  <tr>
    <td class="fieldLabel">Phone number:
    <td><input id="phoneNumber" name="phoneNumber"><br>
        <span class="screenTip">Format: 999&nbsp;999&nbsp;9999</span>
</table>

应用程序只在用户提交表单(或发送数据)时关心值是否有效,而在此期间的任何情况都是无关紧要的。使用脚本实现一个用户友好的字段来限制输入,当用户键入(或粘贴或拖放)它时,对于一些浏览器来说非常困难。对于所有正在使用的浏览器来说,这可能是不可能的。

另一方面,在提交值或字段失去焦点时验证该值相当容易,并且可以提供用户友好的消息以纠正任何错误(保留该值,让用户进行更正)。


0

这个问题几乎所有的格式化函数都有。特别是,如果你想输入一个电话号码,比如“33081”,但后来发现你实际上想输入的是“340 81”,那么你必须连续按两次退格键,一共四次才能“撤消”格式化。这会让触摸打字者抓狂。 - Jeremy J Starcher
通过编辑代码以检测退格键的关键代码并确定插入符位置可以解决该问题。 - Bot
@bot——如果您只允许用户自由输入数字而不强制按照您的方式输入,那么就不需要任何(常常有问题的)脚本编写,同时也会让用户感到满意。 - RobG
@Bot - 我并没有说这是不可能的。我只是举了一个例子来说明它如何违反基本的可用性原则,写一个能够良好运作的控件确实很困难。输入“919 999”,然后试着将“919”更改为“928”,看看光标如何跳动。它不像一个正常的控件,它是损坏的,而且比人们想象的要难得多去编写一个能够工作的控件。 - Jeremy J Starcher
@Bot 谢谢提供的信息,我会尝试在“失焦事件”中使用它,以避免Jeremy提出的问题。 - user1631651

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接