防止 Backspace 和 Delete 在 vanilla JS 中被输入事件 "handled"

Question

我正在尝试创建一个简单的程序，自动将“连字符”添加到文本输入字段。目标是在第 5、9 和 14 个字符处添加连字符。除此之外，它应该只允许数字，它通过“替换”由空字符串键入的任何内容来实现。

现在它工作正常：如果您键入内容，没问题，系统会添加连字符并且只考虑数字。当您复制/粘贴字符串时（通过 ctrlcmd + C / ctrlcmd + v 或右键单击复制/粘贴），它会删除 ReGex 不允许的字符并将连字符放在正确的位置。但是，当我尝试删除连字符时，它不起作用。我想，看看我的代码，连字符被删除了，所以字符串现在是 4、9 或 14 个字符长，连字符一被删除就会自动再次添加。我已经尝试用 keyup、keypress 或 keydown 替换输入侦听器，如果我只是 return 当 event.key 是退格或删除时函数的错误结果，这很好，但是，右键单击复制粘贴不再起作用，我希望它起作用。

有没有办法让我使用输入事件侦听器来侦听除 backpsace 或 del 键之外的任何输入？还有其他想法吗？我想要一个普通的 JS 答案（虽然我猜 jQuery 一个可能对其他人有用）。

这是我的代码：

const selectConfirmBtn = document.querySelector(".confirm");
const selectSNInput = document.querySelector(".serial-number");

let serialNumberLength;
let serialNumber;

selectSNInput.addEventListener("input", function(event) {

    // if (event.key === "Backspace" || event.key === "Delete") {
    //     return false;
    // }

  selectSNInput.value = selectSNInput.value.replace(/[^0-9]/g, "");


  console.log(selectSNInput.value);
  console.log(selectSNInput.value.length);

  if (selectSNInput.value.length >= 4) {
    selectSNInput.value =
      selectSNInput.value.substring(0, 4) +
      "-" +
      selectSNInput.value.substring(4, selectSNInput.value.length);

    if (selectSNInput.value.length >= 9) {
      selectSNInput.value =
        selectSNInput.value.substring(0, 9) +
        "-" +
        selectSNInput.value.substring(9, selectSNInput.value.length);
    }
    if (selectSNInput.value.length >= 14) {
      selectSNInput.value =
        selectSNInput.value.substring(0, 14) +
        "-" +
        selectSNInput.value.substring(14, selectSNInput.value.length);
    }
  }
  if (selectSNInput.value.length == 19) {
    selectConfirmBtn.disabled = false;
  } else {
    selectConfirmBtn.disabled = true;
  }
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <label>Enter a serial number!
        <input type="text" value="" class="serial-number">
    </label>

    <input class="confirm" type="button" value="confirm" disabled><br>

    <div class="message"></div>



    <script src="js/condition.js"></script>
</body>

</html>

Answer 1

您将 - 添加到第 4 位数字后缀，您可以尝试将前缀添加到第 5 位数字，即仅当第 5 位数字可用时才插入 -，如下所示。

const selectConfirmBtn = document.querySelector(".confirm");
const selectSNInput = document.querySelector(".serial-number");

let serialNumberLength;
let serialNumber;

selectSNInput.addEventListener("input", function(event) {
  const splitByLen = 4;
  const value = selectSNInput.value.replace(/[^0-9]/g, "");
  let result = [],
    start = 0,
    end = 0;

  do {
    end = start + splitByLen > 12 ? start + value.length : start + splitByLen;
    const subValue = value.slice(start, end);
    if (subValue) {
      result.push(subValue);
    }
    start = end;
  } while (end < value.length);

  selectSNInput.value = result.join('-');
  if (selectSNInput.value.length == 19) {
    selectConfirmBtn.disabled = false;
  } else {
    selectConfirmBtn.disabled = true;
  }
});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <label>Enter a serial number!
        <input type="text" value="" class="serial-number">
    </label>

  <input class="confirm" type="button" value="confirm" disabled><br>

  <div class="message"></div>



  <script src="js/condition.js"></script>
</body>

</html>

防止 Backspace 和 Delete 在 vanilla JS 中被输入事件 "handled"

Prevent Backspace and Delete from being "handled" by input event in vanilla JS

javascript

dom-events