JavaScript 实现网页屏蔽 Backspace 键：保留输入框正常退格功能

云舒

发布时间：2026-10-14 | 4人浏览过

原创

为了防止用户在全屏浏览时因误按 Backspace 键触发浏览器后退，常需要屏蔽该按键。但如果完全禁用会导致输入框无法删除字符。本文将介绍如何通过 JavaScript 精准识别焦点位置，实现非输入区域屏蔽 Backspace，而输入区域保持正常的退格功能。

问题背景

现代浏览器默认将 Backspace 键作为“上一页”的快捷键（类似于 PC 端的 Alt + Left Arrow）。当用户在网页上滚动浏览内容时，一旦误触该键，可能会意外离开当前页面或刷新列表，造成操作中断。然而，当光标位于 <input>、<textarea> 或密码输入框时，用户期望按下 Backspace 能够删除已输入的文本，而非切换页面。

解决方案与代码实现

我们需要监听文档的全局键盘按下事件，判断是否按下了 Backspace 键（ keycode 为 8），并检查当前获得焦点的元素是否为可编辑状态。如果是普通文本输入区域，则允许默认行为；否则，取消默认行为以阻止页面后退。

第1步：编写兼容性拦截脚本

为了确保在不同浏览器环境下正常运行，建议使用如下逻辑覆盖默认的 onkeydown 行为。该脚本能兼容旧版 IE 与现代标准浏览器：

document.onkeydown = function (e) {
  // 1. 兼容不同浏览器的 event 对象获取
  var e = e || window.event;
  var code;

  // 2. 获取按键码：支持 keyCode (IE/旧式) 和 which (部分 Mozilla 早期版本)
  if (e.keyCode) {
    code = e.keyCode;
  } else if (e.which) {
    code = e.which;
  }

  // 3. BackSpace 的 keycode 值为 8
  if (code == 8) {
    var srcElement = e.srcElement || e.target;
    
    // 4. 判断当前焦点元素的类型
    // 允许 text, textarea, password 类型的输入，且未设置为只读
    var isInput = (srcElement.type == "text" || 
                   srcElement.type == "textarea" || 
                   srcElement.type == "password");
    var isReadOnly = (srcElement.readOnly == true);

    // 5. 核心逻辑：如果不是输入框，或者虽然是输入框但被设为只读，则屏蔽 Backspace
    if (!isInput || isReadOnly) {
      // 阻止默认的后退行为
      if(e.preventDefault) {
        e.preventDefault();
      } else {
        e.returnValue = false; // IE 兼容写法
      }
      return false;
    }
  }
  return true;
};

代码逻辑详解

上述代码的核心在于对 srcElement（即触发事件的 DOM 节点）的类型判断。

事件标准化：通过 e || window.event 确保获取正确的 Event 对象，避免在非现代浏览器中报错。
按键识别：仅处理 keycode 为 8 的事件，避免干扰其他按键（如方向键、Tab 等）。
白名单机制：明确列出了允许使用 Backspace 的元素类型：text（单行文本）、textarea（多行文本）和 password（密码框）。任何不在列表内的元素（如按钮、链接、空白区域）按下 Backspace 均会被拦截。
只读保护：即使元素类型是 input，如果其 readOnly 属性为 true，也应视为不可编辑，从而屏蔽该键。

注意事项与替代方案

虽然此方法有效，但在复杂的单页应用（SPA）或包含自定义富文本编辑器、下拉选择器的项目中，简单的 type 判断可能不够全面。例如，某些使用 contenteditable 的 div 或特定的 JS 插件控件，可能不具备标准的 type 属性。

高级场景补充

如果遇到上述复杂情况，建议进一步判断元素是否具有焦点且处于可编辑状态。可以使用以下更通用的判断逻辑扩展：

// 更通用的不可编辑判断
var isEditable = (
  srcElement.isContentEditable ||
  srcElement.type === 'text' ||
  srcElement.type === 'textarea' ||
  srcElement.type === 'password'
) && !srcElement.disabled && !srcElement.readOnly;

结合之前的判断，若 !isEditable 则为真，则执行屏蔽操作。这能有效覆盖更多现代 UI 组件的场景。