当前位置：首页 > JavaScript

js实现退格键

2026-03-16 04:14:30JavaScript

监听键盘事件

在JavaScript中，可以通过监听键盘事件来检测退格键（Backspace）的按下。使用keydown或keyup事件，检查事件的key属性是否为"Backspace"。

document.addEventListener('keydown', function(event) {
  if (event.key === 'Backspace') {
    console.log('退格键被按下');
    // 执行退格逻辑
  }
});

阻止默认行为

在某些情况下（如输入框内），退格键的默认行为是删除字符。若需阻止默认行为，可以调用event.preventDefault()。

js实现退格键

document.addEventListener('keydown', function(event) {
  if (event.key === 'Backspace') {
    event.preventDefault(); // 阻止默认删除行为
    console.log('退格键按下，但默认行为被阻止');
  }
});

动态删除内容

通过退格键实现删除功能时，可以操作DOM元素的内容。例如，删除输入框的最后一个字符或移除特定元素。

js实现退格键

const input = document.getElementById('myInput');
document.addEventListener('keydown', function(event) {
  if (event.key === 'Backspace') {
    const currentValue = input.value;
    input.value = currentValue.slice(0, -1); // 删除最后一个字符
  }
});

兼容性处理

部分旧浏览器可能不支持event.key，需使用event.keyCode（退格键的keyCode为8）。

document.addEventListener('keydown', function(event) {
  if (event.key === 'Backspace' || event.keyCode === 8) {
    console.log('退格键被按下');
  }
});

特定场景屏蔽退格键

在表单提交或页面导航时，可能需要屏蔽退格键的默认行为以避免意外操作。

document.addEventListener('keydown', function(event) {
  if (event.key === 'Backspace' && event.target.tagName !== 'INPUT') {
    event.preventDefault(); // 非输入框时阻止退格键
  }
});