当前位置：首页 > 文章列表 > 文章 > 前端 > 电话输入框添加空格的JS方法

电话输入框添加空格的JS方法

2025-09-17 14:39:39 0浏览收藏

小伙伴们有没有觉得学习文章很有意思？有意思就对了！今天就给大家带来《电话号码输入框添加空格的 JS 实现》，以下内容将会涉及到，若是在学习中对其中部分知识点有疑问，或许看了本文就能帮到你！

使用 JavaScript 在电话号码输入框中每两位数字间添加空格

本文将介绍如何使用 JavaScript 为电话号码输入框实现每两位数字之间自动添加空格的功能。由于 <input type="number"> 不允许直接插入空格，我们将使用 <input type="tel"> 并结合 JavaScript 的事件监听和字符串处理方法，实现输入时自动格式化电话号码的效果。

实现原理

核心思路是监听 <input type="tel"> 元素的 input 事件，在每次输入时，先移除所有非数字字符，然后每隔两位数字插入一个空格。

具体步骤

修改 HTML 输入框类型： 将 <input type="number"> 修改为 <input type="tel">。

&lt;input type=&quot;tel&quot; class=&quot;phone&quot; placeholder=&quot;Phone&quot; id=&quot;phone&quot;&gt;
&lt;input type=&quot;tel&quot; class=&quot;phone&quot; placeholder=&quot;Second Number&quot; id=&quot;secondnumber&quot;&gt;
&lt;input type=&quot;tel&quot; class=&quot;phone&quot; placeholder=&quot;Fax&quot; id=&quot;fax&quot;&gt;

解释： type="tel" 允许输入数字和一些特殊字符，更适合电话号码的输入。

编写 JavaScript 代码： 使用 querySelectorAll 获取所有 class 为 phone 的输入框，并为每个输入框添加 input 事件监听器。
```
document.querySelectorAll('.phone').forEach(el => {
  el.oninput = () => el.value = el.value.replace(/\D/g, '').replace(/(.{2})/g, '$1 ');
})
```
代码解释：
- document.querySelectorAll('.phone'): 选取所有 class 为 "phone" 的元素。
- .forEach(el => { ... }): 遍历每个选中的元素。
- el.oninput = () => { ... }: 为每个元素绑定 input 事件监听器。当输入框的内容发生改变时，该函数会被调用。
- el.value = el.value.replace(/\D/g, '').replace(/(.{2})/g, '$1 ');: 这是核心的格式化逻辑。
  - el.value.replace(/\D/g, ''): 使用正则表达式 /\D/g 移除所有非数字字符。 \D 表示非数字字符，g 表示全局匹配。
  - .replace(/(.{2})/g, '$1 '): 使用正则表达式 /(.{2})/g 每两位数字添加一个空格。 (.{2}) 表示匹配任意两个字符，并将其捕获到第一个分组 $1 中。 g 表示全局匹配。然后用 $1 (捕获到的内容加上一个空格) 替换匹配到的内容。

完整示例

<!DOCTYPE html>
<html>
<head>
  <title>电话号码格式化</title>
</head>
<body>

  &lt;input type=&quot;tel&quot; class=&quot;phone&quot; placeholder=&quot;Phone&quot; id=&quot;phone&quot;&gt;
  &lt;input type=&quot;tel&quot; class=&quot;phone&quot; placeholder=&quot;Second Number&quot; id=&quot;secondnumber&quot;&gt;
  &lt;input type=&quot;tel&quot; class=&quot;phone&quot; placeholder=&quot;Fax&quot; id=&quot;fax&quot;&gt;

  <script>
    document.querySelectorAll('.phone').forEach(el => {
      el.oninput = () => el.value = el.value.replace(/\D/g, '').replace(/(.{2})/g, '$1 ');
    })
  </script>

</body>
</html>

注意事项

用户体验： 虽然这种方式可以实现自动格式化，但用户可能会在输入过程中看到格式变化，这可能会影响用户体验。可以考虑在失去焦点时再进行格式化，或者使用更复杂的逻辑来优化体验。
正则表达式： 正则表达式是强大的工具，但需要谨慎使用。确保正则表达式的正确性，避免出现意外的行为。
浏览器兼容性： 确保代码在目标浏览器上运行正常。
数据验证： 格式化只是展示，还需要进行数据验证，确保输入的是有效的电话号码。可以在提交表单时进行验证。
性能： 对于大量输入框，频繁的字符串操作可能会影响性能。可以考虑使用节流或防抖来优化性能。