如何正确引用DELETE与BACKSPACE按键，实现输入框条件防删除？

问题原因 #

你用的keypress事件不会触发Backspace、Delete这类控制键，所以你的删除阻止逻辑根本没机会执行。另外，后续的输入限制判断会覆盖前面的阻止操作，进一步导致失效。

修复代码 #

把事件换成keydown，调整判断顺序：

$(document).ready(function() {
    $('#mobile').val("09"); // 初始值设为"09"
  
    $('#mobile').on("keydown", function(event) {
      const currentVal = $(this).val();
      const key = event.key;

      // 当长度≤2时，阻止退格和删除键
      if (currentVal.length <= 2) {
        if (key === "Backspace" || key === "Delete") {
          event.preventDefault();
          return; // 阻止后续逻辑执行，避免冲突
        }
      }

      // 只允许数字输入，同时保留方向键、Tab键的正常功能
      if (!/[0-9]/.test(key) && !["ArrowLeft", "ArrowRight", "Tab"].includes(key)) {
        event.preventDefault();
      }
      // 长度超过11位时，除了删除类按键和控制键，阻止其他输入
      if (currentVal.length >= 11 && !["Backspace", "Delete", "ArrowLeft", "ArrowRight", "Tab"].includes(key)) {
        event.preventDefault();
      }
    });
});

关键调整点 #

• 改用keydown事件：它能捕获所有按键，包括退格、删除、方向键等控制键。
• 增加return：阻止删除键后直接跳出，避免后续的输入限制逻辑干扰。
• 保留必要控制键：比如方向键、Tab键，保证输入框的正常操作体验。
• 拆分判断逻辑：把长度限制和输入类型限制分开，避免逻辑冲突，让每部分职责更清晰。

内容的提问来源于stack exchange，提问作者lll