如何使用 javascript 屏蔽 HTML 输入？答案

【问题标题】：How can I mask an HTML input using javascript?如何使用 javascript 屏蔽 HTML 输入？
【发布时间】：2011-12-01 17:19:07
【问题描述】：

如何在 HTML 控件上使用 javascript 屏蔽美国手机。

我希望输入强制文本采用以下格式：

[(111)111-1111]

这是我目前拥有的：

mask(str, textbox, loc, delim) {
    var locs = loc.split(',');
    for (var i = 0; i <= locs.length; i++) {
        for (var k = 0; k <= str.length; k++)
        {
            if (k == locs[i]) {
                if (str.substring(k, k + 1) != delim) {
                    str = str.substring(0,k) + delim + str.substring(k,str.length)
                }
             }
         }
     }
     textbox.value = str
}

【问题讨论】：

不清楚你想做什么。
我同意，不清楚您所说的“屏蔽美国电话”是什么意思。您是否尝试将用户输入的电话号码解析为其部分？您是否尝试以特定格式显示电话号码？请举例说明您的起点和最终目标。
下面是我的脚本函数掩码(str, textbox, loc, delim){ var locs = loc.split(','); for (var i = 0; i

标签： javascript

【解决方案1】：

处理有保证格式的电话号码输入的常用方法有以下三种：

1.无论如何都接受所有数字输入

用户数量不详但仍居住在美国的可能性比以往任何时候都高。接受所有类型的数字输入可以减轻这种担忧，因为只有在输入的数字不够或错误的情况下，数字才会毫无用处。

2。将其拆分为三个固定长度的文本框

很多财务软件都是这样做的。不知道为什么，具体来说，但那里似乎相当频繁。如果他们在文本框上输入了最大限制，建议在按键后将光标前进到下一个框。此外，这保证您将获得您期望的任何格式的数字，因为您可以将生成的帖子变量附加在一起。

HTML 示例：

<input id="phonePart1" maxlength="3" name="phonePart1"/>
<input id="phonePart2" maxlength="3" name="phonePart2"/>
<input id="phonePart3" maxlength="4" name="phonePart3"/>

和一个小 jQuery sn-p 以您的格式合并这三个：

var phonePart1 = parseInt($("#phonePart1").val(), 10);
var phonePart2 = parseInt($("#phonePart2").val(), 10);
var phonePart3 = parseInt($("#phonePart3").val(), 10);
var phone = "(";

if (isNaN(phonePart1)||isNaN(phonePart2)||isNan(phonePart3)) {

    // Incorrect format

} else { 

    phone = phone + phonePart1 + ")" + phonePart2 + "-" + phonePart3;

}

3.使用正则表达式匹配数字格式

您可以使用正则表达式的组合来匹配多个数字，或者明确地匹配您所询问的那个。这可能是您正在寻找的技术。这是正则表达式：

/\([0-9]{3}\)[0-9]{3}-[0-9]{4}/

你会这样使用它：

if (yourphonevariable.match(/\([0-9]{3}\)[0-9]{3}-[0-9]{4}/))
{
    // it's valid
}

4.如果您希望使用掩码格式化文本本身...

考虑http://digitalbush.com/projects/masked-input-plugin/ 的jQuery 插件。用户@John Gietzen 在这篇文章之外向我提出了这个建议，所以请随时为他点赞。

【讨论】：