简单的Javascript方式，在输入字段的每5位数字后添加一个空格

Plain Javascript way to add a space on the fly after every 5th digit in input field

本文关键字：添加 空格 一个 数字 5位 方式 Javascript 输入 字段 简单      更新时间：2023-09-26

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

12345 56789 12345 56789atr

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

我还需要支持按退格并更正数字的能力，或者将光标放在任何地方并开始用退格进行更正。

以下代码基于此处的答案：如何为IBAN注册每4个字符插入空格？

退格不可靠

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>

这里有一个相对较短的方法：

只需为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"/>

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

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

相关文章：