如何使用javascript屏蔽HTML输入?

时间:2011-10-05 18:18:10

标签: javascript

如何在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
} 

1 个答案:

答案 0 :(得分:11)

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

<强> 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片段以你的格式合并三个:

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在这篇帖子之外向我提出这个问题,所以请随时给他一些荣誉。