电话号码的jQuery输入掩码

Question

我希望用户输入自动填充电话号码的标点符号，以便看起来像 (xxx) xxx-xxxx。这是我的 HTML 代码：

  <div class="form-group">
    <label class="control-label col-sm-2">Phone Number:</label>
    <div class="col-sm-10">          
      <input type="text" class="form-control" name="phoneNumber"
           id="phoneNumber" value="<?php echo $row["phoneNumber"];?>">
    </div>
  </div>

我还需要做什么才能完成这项任务？我正在尝试使用 jQuery 和输入掩码。

Answer 1

您可以使用Input Mask jQuery 扩展来完成此操作。

$('#phoneNumber').inputmask("(999) 999-9999");

<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 class="control-label col-sm-2">Phone Number:</label>
  <div class="col-sm-10">          
  <input type="text" class="form-control" name="phoneNumber" id="phoneNumber" value="">
</div>

Answer 2

目前用于检测全球任何类型的电话号码，phone extension 更合适，因为它已经在 preexisting array of masks 中进行检查（无需定义掩码）：

let allIns = document.querySelectorAll("input");
Inputmask().mask(allIns);
[...allIns].map(el => el.setAttribute('placeholder', "+#(###)-###-####"));

$('#jqp input').inputmask("phone", {
  placeholder: '#',
  showMaskOnHover: false,
  onKeyValidation: function () {
    let mt = $(this).inputmask("getmetadata");
    $('#jqp span').text(`${mt['cd']} (${mt['cc']})`);
    //console.log(mt);
  }
});

Inputmask.extendAliases({
  my_phone: {
    alias: "abstractphone",
    placeholder: '#',
    phoneCodes: [{
      mask: "+987-####",
      cc: "zz",
      cd: "zzzz",
      desc_en: "Moon!",
      name_ru: "яяя",
      desc_ru: ""
    }, {
      mask: "+789-###",
      cc: "yy",
      cd: "Y-Y",
      desc_en: "Sun!"
    }],
    onKeyValidation: function() {
      let mt = $(this).inputmask("getmetadata");
      $('#jqma span').text(mt['desc_en']).css('color',
      `#${Math.floor(Math.random() * 0x1000000).toString(16).padStart(6, 0)}`);
      //console.log(mt);
    }
  }
});
$('#jqma input').inputmask("my_phone");

span {color:#37e;font-weight:bold}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/4.x/dist/inputmask/inputmask.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/4.x/dist/inputmask/inputmask.extensions.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/4.x/dist/inputmask/inputmask.phone.extensions.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/4.x/dist/inputmask/jquery.inputmask.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/4.x/dist/inputmask/phone-codes/phone.js"></script>
<p>
<label>Old simple HTML data + JS:      
<input type="text" data-inputmask="'mask': '+9(999)-999-9999', 'showMaskOnHover': false, 'placeholder': '#'" >
</label>
</p>

<p id="jqp"><label>jQuery phone extension alias: <input/></label> <span/>
</p>
<p id="jqma"><label>jQuery extended phone alias: <input/></label> <span/>
</p>

然而，phone.js 实际上为我们提供了一个巨大的alias，在其中动态访问每个项目的详细信息/元数据（例如国家/地区） ) 在用户输入时是可能的（输入 2^nd 输入以查看它）。因此，您还可以根据这个庞大的数组（3^rd 输入）创建自己的电话分机。

这和以前的Inputmask 一样（现在也可能没有 jQuery）。上面我刚刚描绘的：

1. 只需使用 HTML 的data- 属性；
2. 直接使用稍加定制的电话分机（例如更改占位符）；
3. 定义一组特定的电话号码，以便通过电话分机进行验证，只需在扩展时使用alias: "abstractphone"。

Answer 3

输入掩码的工作示例：

https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js

<input id="phn-number" class="ant-input" type="text" placeholder="(XXX) XXX-XXXX" data-inputmask-mask="(999) 999-9999">


jQuery( '#phn-number[data-inputmask-mask]' ).inputmask();