Javascript-在文本框中的数字后插入空格

我正在寻找一种在文本框中的4个数字后插入空格的方法

示例：XXXX XXXX XXXX

我已经能够得到没有箭头键的间距或者没有间距的箭头键

我已经调查了这个问题和网站上的其他一些问题，但我无法解决退格键和箭头键的问题

这是我的密码：

function isNumber(event) {
    event = (event) ? event : window.event;
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
return true;
}

函数isNumber（事件）{
事件=（事件）？事件：window.event；
var charCode=（event.which）？event.which:event.keyCode；
如果（字符码>31&（字符码<48 | |字符码>57））{
返回false；
}
返回true；
}

这里有一个例子。这是非常接近，但我没有完全正确的间距

这是否可能与我当前的功能有关，或者我是否需要以不同的方式处理此问题

编辑：是否可以添加箭头键功能，而不需要释放光标后返回到后面？

问题是您使用了按键事件

 <input type="text" id="test" maxlength="14" name="test" 
     onkeyup="return isNumber(event)" /> 

将清楚地解释为什么

keypup

和

keypdown

事件有效，而不是

keypress

允许使用箭头键

---

您必须使用

keydown

event

我建议您使用负责关键字粘贴和鼠标粘贴的oninput事件

 <input type="text" id="test" maxlength="14" name="test" oninput="return isNumber(event)" />

---

我明白你为什么坚持使用按键事件了，所以这个函数应该可以让你想做的事情成为可能

请阅读评论区内的注释，我试图解释它在做什么

我对正则表达式还不是很在行，但多亏了另一个答案，我认为这一个效果最好

使用@Gops AB中的正则表达式编写代码：

function isNumber(event,el) {
    event = (event) ? event : window.event;

    var charCode = (event.which) ? event.which : event.keyCode;

      if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    //Add a space after 4 numbers.


    var v=el.value + String.fromCharCode(charCode); //Keypress does not let us see the value of the text box after the press, so we have to add the string to our comparison.
    v=v.replace(/\s/g,'');

    el.value=v.replace(/(.{4})/g, '$1 ').trim(); // using regex from other answer. Thanks @Gops AB for the example
    return false;
}

函数isNumber（事件，el）{
事件=（事件）？事件：window.event；
var charCode=（event.which）？event.which:event.keyCode；
如果（字符码>31&（字符码<48 | |字符码>57））{
返回false；
}
//在4个数字后面加一个空格。
var v=el.value+String.fromCharCode（charCode）；//按键不允许我们在按下后看到文本框的值，因此我们必须将字符串添加到比较中。
v=v.替换（/\s/g'）；
el.value=v.replace（/（.{4}）/g，'$1'）.trim（）；//使用来自其他答案的正则表达式。感谢@Gops AB提供的示例
返回false；
}

使用正则表达式演示：

---

以下是最有效的速记方法：

//HTML

<input type="text" id="cc" name="cc" maxlength="19">

---

按键

事件有什么问题。。。你让它工作，但你应该有理由以及…有可能允许箭头键？如果尝试向左箭头并释放键，光标将移到后面。

function isNumber(event,el) {
    event = (event) ? event : window.event;

    var charCode = (event.which) ? event.which : event.keyCode;

      if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    //Add a space after 4 numbers.


    var v=el.value + String.fromCharCode(charCode); //Keypress does not let us see the value of the text box after the press, so we have to add the string to our comparison.
    v=v.replace(/\s/g,'');

    el.value=v.replace(/(.{4})/g, '$1 ').trim(); // using regex from other answer. Thanks @Gops AB for the example
    return false;
}

<input type="text" id="cc" name="cc" maxlength="19">

init=()=>document.getElementById('cc').addEventListener('keyup',(e)=>e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim());
document.addEventListener('DOMContentLoaded', init);