电话号码的jQuery输入掩码

Posted 2023-05-08

【中文标题】电话号码的jQuery输入掩码

【英文标题】：jQuery input mask for phone number

【发布时间】：2017-08-25 02:39:55

【问题描述】：

我希望用户输入自动填充电话号码的标点符号，以便看起来像 (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 和输入掩码。

【参考方案1】：

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

$('#phoneNumber').inputmask("[phone]");

<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>

【讨论】：

非常适合我！除非您需要在最后一组数字中添加额外的 9。应该是“[phone]”

效果很好，但是 226kb 的文件大小相当大。有没有办法只为电话号码获取更小的 jQuery 输入掩码？

$("#pr_phone").inputmask("[phone]", onKeyValidation: function (key, result) );我已经像这个例子一样添加了它。但我想为国家代码设置“+1”，这样任何人都无法更改它。请建议。谢谢。

【参考方案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': '[phone]', '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）。上面我刚刚描绘的：

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

【参考方案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="[phone]">


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