防止退格和删除被香草JS中的输入事件“处理”答案

【问题标题】：Prevent Backspace and Delete from being "handled" by input event in vanilla JS防止退格和删除被香草JS中的输入事件“处理”
【发布时间】：2021-04-25 17:11:13
【问题描述】：

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

现在它可以正常工作了：如果你输入一些东西，没问题，连字符会被添加，并且只考虑数字。当您复制/粘贴字符串（通过 ctrlcmd + C / ctrlcmd + v 或右键单击复制/粘贴）时，它会删除正则表达式不允许的字符并将连字符放在正确的位置。但是，当我尝试删除连字符时，它不起作用。我想，看看我的代码，连字符被删除了，所以字符串现在是 4、9 或 14 个字符长，一旦删除，连字符就会自动再次添加。我尝试用 keyup、keypress 或 keydown 替换输入侦听器，如果我只是在 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>

【问题讨论】：

如果您从事件回调中返回 false，它将以不同的方式处理。您可以反转条件并在 if 块内的 if 条件之后添加代码。 if (!(event.key === "Backspace" || event.key === "Delete"))
@Atul 我已经尝试过你的方法，但它不起作用。我觉得“event.key”属性不适用于输入事件，因为我上面在代码 sn-p 中评论的部分适用于 keyup 或 keydown 事件。但这并不能解决我的右键单击/粘贴问题:'(

标签： javascript dom-events

【解决方案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>

【讨论】：

感谢@Ravikumar，效果很好！