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中进行检查（无需定义掩码）：

＆＃13;

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");

＆＃13;

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

＆＃13;

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

＆＃13;

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

这就是旧的Inputmask（现在也可能是免费的jQuery）。上面我刚刚描述过：

只使用HTML data-属性;
直接使用手机扩展程序进行轻微自定义（例如更改占位符）;
在扩展时使用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();

用于电话号码的jQuery输入掩码

3 个答案: