4

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

4

3 回答 3

14

您可以通过使用Input MaskjQuery 扩展来完成此操作。

$('#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>

于 2017-03-31T00:23:44.647 回答
2

输入掩码的一个工作示例：

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();
于 2020-09-17T16:22:38.080 回答
2

目前，对于检测全球任何类型的电话号码，电话分机更合适，因为它已经检查了预先存在的掩码数组（无需定义掩码）：

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实际上为我们提供了一个巨大的别名，当用户输入（输入第二个输入以查看它）时，可以动态访问每个项目的详细信息/元数据（例如国家/地区）。因此，您还可以根据这个庞大的数组（第 3路输入）创建自己的电话分机。

这都是相同的旧Inputmask（现在也可能是 jQuery-free 的）。上面我刚刚描绘的：

  1. 简单地使用 HTMLdata-属性；
  2. 直接使用稍微定制的电话分机（例如更改占位符）；
  3. 定义一组特定的电话号码，通过电话分机验证，仅alias: "abstractphone"在扩展时使用。
于 2018-04-14T15:27:05.593 回答