如何在JavaScript中实现每两位数字间添加空格的格式化输入-js教程-PHP中文网

如何在JavaScript中实现每两位数字间添加空格的格式化输入

霞舞

发布： 2025-08-19 18:42:13

原创

573人浏览过

如何在javascript中实现每两位数字间添加空格的格式化输入

本文介绍了如何使用JavaScript实现对电话号码、传真号码等输入框进行格式化，使其在每两位数字之间自动添加空格。通过将输入框类型设置为tel，并利用正则表达式和JavaScript事件监听，可以轻松实现这一功能，提升用户体验。

在Web开发中，经常需要对用户输入的数据进行格式化，例如电话号码、身份证号等。本文将介绍如何使用JavaScript实现一个常见需求：在输入框中，每两位数字之间自动添加一个空格。

1. HTML结构：使用type="tel"

首先，需要将HTML输入框的类型设置为tel，而不是number。因为type="number"类型的输入框不允许输入空格。

立即学习“Java免费学习笔记（深入）”；

<input type="tel" class="phone" placeholder="Phone" id="phone">
<input type="tel" class="phone" placeholder="Second Number" id="secondnumber">
<input type="tel" class="phone" placeholder="Fax" id="fax">

登录后复制

2. JavaScript实现：监听input事件并格式化

接下来，使用JavaScript监听输入框的input事件。在事件处理函数中，使用正则表达式移除所有非数字字符，然后每隔两位数字插入一个空格。

比格设计

比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器

124

查看详情

document.querySelectorAll('.phone').forEach(el => {
  el.oninput = () => {
    // 1. 移除所有非数字字符
    let value = el.value.replace(/\D/g, '');

    // 2. 每两位数字插入一个空格
    value = value.replace(/(.{2})/g, '$1 ');

    // 3. 更新输入框的值
    el.value = value;
  }
})

登录后复制

代码解释：

document.querySelectorAll('.phone'): 选择所有class为phone的元素，返回一个NodeList。
.forEach(el => { ... }): 遍历NodeList中的每个元素，el代表当前遍历到的元素。
el.oninput = () => { ... }: 为每个元素绑定input事件的监听器。 input事件在输入框的值发生变化时触发。
el.value.replace(/\D/g, ''): 使用正则表达式 /\D/g 匹配所有非数字字符，并用空字符串替换，从而移除所有非数字字符。
value.replace(/(.{2})/g, '$1 '): 使用正则表达式 /(.{2})/g 匹配每两个任意字符（.{2}），并将它们捕获到第一个分组（(...)）中。然后，使用 $1 将匹配到的内容替换为第一个分组的内容加上一个空格。 g 标志表示全局匹配，即替换所有匹配项。

3. 完整示例：

<!DOCTYPE html>
<html>
<head>
  <title>格式化输入框</title>
</head>
<body>
  <input type="tel" class="phone" placeholder="Phone" id="phone">
  <input type="tel" class="phone" placeholder="Second Number" id="secondnumber">
  <input type="tel" class="phone" placeholder="Fax" id="fax">

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

登录后复制

注意事项：

此方法只适用于简单的格式化需求。如果需要更复杂的格式化，例如根据不同的国家/地区代码进行格式化，则需要使用更复杂的逻辑。
由于使用了正则表达式，可能会影响性能。对于大量输入框，建议优化正则表达式或使用其他方法。
用户仍然可以手动删除空格，但输入新的字符时，空格会自动添加。

总结：

通过将输入框类型设置为tel，并利用JavaScript的input事件和正则表达式，可以轻松实现每两位数字间添加空格的格式化输入。这种方法简单易懂，能够有效地提升用户体验。记住，根据实际需求，可能需要调整正则表达式以适应不同的格式化规则。

以上就是如何在JavaScript中实现每两位数字间添加空格的格式化输入的详细内容，更多请关注php中文网其它相关文章！