Question

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

12345 56789 12345 56789

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

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

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

退格无法可靠地运作。

＆＃13;

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);
});

＆＃13;

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

＆＃13;

Answer 1

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

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

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

删除所有空格的原因是每隔5个字符之间总有一个空格（即使你回去编辑前面的字符）。

＆＃13;

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

＆＃13;

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

＆＃13;

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

如果要阻止此操作，请通过访问selectionEnd属性检索插入符号的当前位置，然后在正则表达式格式设置后设置插入符号的位置已被应用。

＆＃13;
＆＃13;
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); });
＆＃13;
<input id="target" type="text"/>
＆＃13;
＆＃13;
＆＃13;

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

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: