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

Card Number Regex and caret/cursor position (javascript)

本文关键字：位置 光标 javascript 符号 正则表达式 插入      更新时间：2023-09-26

我有一个正则表达式，将信用卡号码分成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();
});

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

任何提示都非常感谢。

见此处:https://jsfiddle.net/oo7Ljm4j/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一个函数来完全禁用非整数字符，并防止粘贴非整数字符

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();
    }
}
演示

也可以接受箭头，如果在这种情况下添加这个条件

(key < 37 || key > 39)

那么你的条件将是这样的

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

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

通过使用field。selectionEnd并在每次输入时重置它，它将光标保持在您想要编辑的位置。

问题源于这样一个事实，即当您对其进行更改时，regex将重新呈现和更新整个字段(因此，很明显，当浏览器每次认为您已经完成时，regex触发时，光标默认为值的末尾。)

  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/

相关文章：