简单的Javascript方式在输入字段中的每第5个数字后动态添加空格

Question

如何在输入字段中每隔5个数字(用户输入)后添加空格？

12345 56789 12345 56789

限制是我不能使用像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>

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"/>

当插入符号后的字符是空格时,您会注意到存在一个小问题(因为在最初检索插入符号的位置时没有考虑空间).要解决此问题,如果后续字符是空格(假设实际添加了空格 - 通过比较替换字符之前和之后的长度来确定),则手动增加位置.