Question

我有一个正则表达式将信用卡号分成4组4位数。

正则表达式是一种享受，但如果我想回到字符串并编辑它，光标会跳到选择的末尾。

<input id= "cardNumber" maxlength="19" type="tel"/>

JS如下：

document.getElementById('cardNumber').addEventListener('input', function (e) {

var field = e.target;

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

});

显然我不希望光标跳转到条目的末尾。我一直在玩插入位置，选择开始和结束但到目前为止没有运气。

任何指针都非常赞赏。

请在此处查看jsfiddle：https://jsfiddle.net/oo7Ljm4j/1/

Answer 1

你可以使用keyup只检查按键是否按下什么都不做

document.getElementById('cardNumber').addEventListener('keyup', function (e) {
  var key = event.which || event.keyCode || event.charCode;
  var field = e.target;
  if (key !== 8) {
    field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
  }
});

DEMO

或

你可以使用create a function a在文本输入中的每个键事件中使用它来完全禁用非整数字符并防止粘贴非整数字符

document.getElementById('cardNumber').addEventListener('keyup', format);
document.getElementById('cardNumber').addEventListener('keydown', format);
document.getElementById('cardNumber').addEventListener('copy', format);       
document.getElementById('cardNumber').addEventListener('keypress', format);

function format(e) {
    var key = event.which || event.keyCode || event.charCode;
    var field = e.target;
    if (key !== 8) {
      field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
    }
}

DEMO

如果这种情况增加了这个条件，你也可以接受箭头

(key < 37 || key > 39)

所以你的情况会是这样的

if (key !== 8 && (key < 37 || key > 39)) {
    field.value = field.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
}

DEMO

Answer 2

好的，经过一番挖掘，我找到了答案！

通过使用field.selectionEnd并在每个（on）输入上重置它，它将光标保持在您想要编辑的位置。

问题源于这样一个事实：正则表达式将在您对其进行更改时重新呈现并更新ENTIRE字段（因此，显然，当正则表达式作为浏览器触发时，游标默认为值的末尾认为你每次都完成了。）

  document.getElementById('cardNumber').addEventListener('input', function (e) {

  var field = e.target, position = field.selectionEnd, length = field.value.length;


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


  field.selectionEnd = position += ((field.value.charAt(position - 1) === ' ' && field.value.charAt(length - 1) === ' ') ? 1 : 0);    
});

这样我们就告诉光标在每个输入上重新计算它的selectionEnd位置。

查看工作的JSFiddle aqui：https://jsfiddle.net/oo7Ljm4j/6/

卡号正则表达式和插入符/光标位置（javascript）

2 个答案: