javascript - 注册IBAN时如何每4个字符插入一个空格？

Question

我对 JavaScript 很陌生，我想在我的输入文本中添加空格插入以用于 IBAN 帐户注册。

<input type="text" name="iban" onkeyup="if(this.value.length > 34){this.value=this.value.substr(0, 34);}" />

这是我的输入字段；有人可以告诉我该怎么做吗？

Answer 1

现有答案比较长，而且看起来有些过头了。另外，它们不能完全工作(例如，一个问题是您无法编辑以前的字符)。

对于那些有兴趣的人，根据 Wikipedia :

Permitted IBAN characters are the digits 0 to 9 and the 26 upper-case Latin alphabetic characters A to Z.

这是一个相对较短的版本，与现有答案类似:

document.getElementById('iban').addEventListener('input', function (e) {
  e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
});

<label for="iban">iban</label>
<input id="iban" type="text" name="iban" />

<小时/>

如上所述，需要注意的是您无法返回并编辑以前的字符。如果您想解决此问题，则需要首先访问 selectionEnd 属性，然后在应用正则表达式格式后设置脱字符号的位置，以检索脱字符号的当前位置。

document.getElementById('iban').addEventListener('input', function (e) {
  var target = e.target, position = target.selectionEnd, length = target.value.length;
  
  target.value = target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
  target.selectionEnd = position += ((target.value.charAt(position - 1) === ' ' && target.value.charAt(length - 1) === ' ' && length !== target.value.length) ? 1 : 0);
});

<label for="iban">iban</label>
<input id="iban" type="text" name="iban" />

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