如何使用type="number"实现电话号码输入格式化掩码

问题原因 #

type="number"类型的输入框有强制校验规则，其value属性仅支持纯数字内容，你代码中生成的(、)、空格、-都属于非数字字符，浏览器会自动将包含这些字符的value置为空，所以原有格式化逻辑完全失效。

最优解决方案 #

使用H5提供的inputmode="numeric"属性替代type="number"，既能唤起移动端纯数字输入键盘，又保留text类型输入框支持任意字符的特性，原有格式化代码不需要做任何修改即可正常运行。

完整可运行代码 #

document.getElementById('phone').addEventListener('input', function (e) {
  var x = e.target.value.replace(/\D/g, '').match(/(\d{0,3})(\d{0,3})(\d{0,4})/);
  e.target.value = !x[2] ? x[1] : '(' + x[1] + ') ' + x[2] + (x[3] ? '-' + x[3] : '');
});

<!-- 替换原有input即可，保留type为text，新增inputmode属性唤起数字键盘 -->
<input type="text" id="phone" inputmode="numeric" placeholder="(555) 555-5555"/>

兼容增强（可选） #

如果需要兼容老旧iOS设备，可以额外增加pattern="[0-9]*"属性，确保老旧设备也能正常唤起数字键盘：

<input type="text" id="phone" inputmode="numeric" pattern="[0-9]*" placeholder="(555) 555-5555"/>

内容的提问来源于stack exchange，提问作者John Simon