Question

我对电话号码数据输入有以下规则：

对于美国手机，必须遵循格式（999）999-9999
对于非美国手机，它必须以+开头，后跟数字，连字符和空格的任意组合（基本上，比美国格式严格得多）

我有正则表达式验证，可确保输入的电话号码符合这些规则。我想使用符合上述规则的电话格式掩码。

例如，只允许特定美国格式的简单情况，我可以这样做：

<label for="phone">Enter Phone Number:</label>
<input type="text" id="phone" name="phone">

<script type="text/javascript">
    $(function () {
        $('.usa-phone').mask("(999) 999-9999");
    });
</script>

当用户点击以关注手机文本框时，这会在文本框中显示如下内容：

(___) ___-____

但是，我如何允许以＆＃34; +＆＃34;开头的国际手机？登录相同的输入字段？

例如+99 (99) 9999-9999。

Answer 1

您可以添加一个在两个面具之间交换的按钮。例如：

＆＃13;

$(document).ready(function() {
  $("#phone").inputmask("mask", {
    "mask": "(999)999-999"
  });
  var i = 0;
  $('.plus-button').click(function() {
    if (i === 0) {
      $("#phone").inputmask("mask", {
        "mask": "+99 (99) 9999-9999"
      });
      i = 1;
    } else {
      $("#phone").inputmask("mask", {
        "mask": "(999)999-999"
      });
      i = 0;
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<label for="phone">Enter Phone Number:
  <button type="button" class="plus-button">+</button>
</label>
<input type="text" id="phone" name="phone" data-mask>

＆＃13;

Answer 2

有几种解决方案，包括让用户从下拉列表中选择他们所在的国家/地区，以便您可以相应地设置格式。第二种方法是截取用户单独的击键，然后改变格式，你可以用+44或+39代表英国或意大利数字格式。

有几个实现它的软件包，并且由于每个国家/地区有100多个国家/地区有多个或两种格式，您可能不应该尝试自己实现，而是使用其中一个软件包< / p>

我想我在这里使用过这个：https://github.com/albeebe/phoneformat.js 在早期的项目中。

由于您正在寻找Jquery解决方案，因此条带库看起来很有前途 https://github.com/stripe/jquery.mobilePhoneNumber

如果您可以自己构建一些代码，那么您可以将此处解释的键盘处理How to change Phone number format in input as you type?与来自其他库中的核心代码结合起来

因此，要严重过度简化逻辑，您可以根据keyup事件中的输入动态更改字段的格式，例如

$("#phone").keyup(function(x){
   var plus = $(x.target).val();
   if (plus[0] == '+')
        $(x.target).mask("\+99 9999999999")
   else
        $(x.target).mask("999 999-9999")  
})

Answer 3

您可以使用以下掩码选项来实现您提到的内容，即+99 (99) 9999-9999 data-inputmask="'mask': ['+99 (99) 9999-9999']"

您可以将上述选项与输入元素一起使用。我为此创造了一个小提琴。

JS小提琴链接： https://jsfiddle.net/5yh8q6xn/1/

HTML代码：

<div class="form-group">
    <label>Intl US phone mask:</label>
    <div class="input-group">
        <div class="input-group-addon">
            <i class="fa fa-phone"></i>
        </div>
        <input id="intl" type="text" class="form-control" data-inputmask="'mask': ['+99 (99) 9999-9999']" data-mask>
        <!--'999-999-9999 [x99999]',   -->
    </div>
    <!-- /.input group -->
</div>

JS代码：

$(function(){
 $("[data-mask]").inputmask(); 
});

其他选项 您还可以在输入掩码中附加0，因为有些用户更喜欢在联系人号码中加上前缀0和+ 要附加0和您的号码，只需在输入元素中替换下面的内容。

data-inputmask="'mask': ['+099 (99) 9999-9999']"

同样，对于不同国家/地区的不同输入，您可以相应地屏蔽输入。

我希望这就是你要找的东西！

使用jQuery MaskedInput插件接受两种不同的电话号码格式

3 个答案: