Question

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

示例：XXXX XXXX XXXX

我能够在没有箭头键或箭头键的情况下获得间距。

我在网站上查看过this个问题以及其他一些问题，但我一直无法解决退格键和箭头键的问题。

这是我的代码：

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

这是一个JSFiddle。这个example非常接近，但我的间距不太正确。

这可能与我当前的功能有关，还是我需要以不同的方式处理？

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

Answer 1

Demo

问题是您使用过按键事件。

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

与你提到的答案相同的功能

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

This Article会清楚地解释为什么keyup和keydown事件有效而不是keypress

允许箭头键Demo

您必须使用keydown事件

Answer 2

我觉得你使用oninput事件来处理关键字粘贴和鼠标粘贴

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

JS：

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

Answer 3

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

请阅读评论区域内的笔记，我试着解释它在做什么。

我对正则表达式还不是很好，但是由于另一个答案，我认为这个效果最好。

使用@Gops AB的REgex代码：

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

使用Regex进行演示： http://jsfiddle.net/gregborbonus/Lm2hS/3208/

Answer 4

这是速记最有效的方式：

// HTML

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

// JS

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

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

4 个答案: