在输入字段中的每 5 位数字后动态添加一个空格的普通 Javascript 方法

Question

如何在输入字段中的每 5 个数字（如用户键入）后添加一个空格？

12345 56789 12345 56789

限制是我不能使用像 jQuery 这样的任何框架。这必须使用纯 Javascript 或 CSS 来完成。

我还需要支持按退格键并更正数字或将光标放在任何位置并开始使用退格键进行更正的功能。

以下代码基于此处的答案： How to insert space every 4 characters for IBAN registering?

退格不能可靠地工作。

function space(str, after) {
  if (!str) {
    return false;
  }
  after = after || 4;
  var v = str.replace(/[^\dA-Z]/g, ''),
    reg = new RegExp(".{" + after + "}", "g");
  return v.replace(reg, function(a) {
    return a + ' ';
  });
}

var el = document.getElementById('pin');
el.addEventListener('keyup', function() {
  this.value = space(this.value, 4);
});

<form>
  <input autocapitalize="off" autocorrect="off" maxlength=20 type="text" placeholder="type the pin" id="pin" name="pin" />
  <script>
  </script>
</form>

Answer 1

这是一个相对较短的方法：

只需为input 事件（或keyup/keydown）添加一个事件侦听器，然后使用一些正则表达式。

在下面的示例中，最初使用.replace(/\s/g, '') 删除所有空格，然后.replace(/(\d{5})/g, '$1 ') 基本上在每5 个字符后添加一个空格。

删除所有空格的原因是，每 5 个字符之间总是有一个空格（即使您返回并编辑以前的字符）。

document.getElementById('target').addEventListener('input', function (e) {
  e.target.value = e.target.value.replace(/\s/g, '').replace(/(\d{5})/g, '$1 ').trim();
});

<input id="target" type="text"/>

---

似乎上述方法唯一需要注意的是，在编辑以前的字符时插入符号的位置会丢失。

如果您想防止这种情况发生，请通过访问selectionEnd 属性检索插入符号的当前位置，然后在应用正则表达式格式之后设置插入符号的位置。

document.getElementById('target').addEventListener('input', function (e) {
  var target = e.target, position = target.selectionEnd, length = target.value.length;
  
  target.value = target.value.replace(/\s/g, '').replace(/(\d{5})/g, '$1 ').trim();
  target.selectionEnd = position += ((target.value.charAt(position - 1) === ' ' && target.value.charAt(length - 1) === ' ' && length !== target.value.length) ? 1 : 0);
});

<input id="target" type="text"/>

当插入符号之后的字符是空格时，您会注意到存在一个小问题（因为在最初检索插入符号的开始位置时没有考虑空格）。为了解决这个问题，如果后面的字符是空格，则手动增加位置（假设实际添加了空格 - 这是通过比较替换字符前后的长度来确定的）。

Answer 2

function myFunction() {
    str = document.getElementById('num').value;

    str=str.replace(/\s/g, '');
    if(str.length%5==0){
    
        document.getElementById('num').value+=" ";
    }
}

<input id='num' type="text" onkeyup="myFunction()">