如何在JavaScript中检测退格键按下与长按并区分二者？

要区分退格键的单次点击和长按，核心思路是通过计时器判断按键持续按下的时长：当退格键按下时启动一个延迟计时器，若在按键松开（keyup）前计时器到期，就判定为长按；如果松开动作在计时器到期前触发，就判定为单次按下。同时要注意处理浏览器长按重复触发keydown的问题，避免多次启动计时器。

结合你现有的IE/Edge光标修复逻辑，我给你调整后的实现方案：

1. 先在组件类中定义状态变量 #

这些变量用来跟踪退格键的按下状态和计时器实例：

import { Component, OnDestroy } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourComponent implements OnDestroy {
  ieFixPosition = false;
  private longPressTimer: number | null = null;
  private isBackspacePressed = false;
  private isBackspaceLongPressed = false;

  // ...其他组件代码

  ngOnDestroy() {
    // 组件销毁时清除计时器，避免内存泄漏
    if (this.longPressTimer) {
      clearTimeout(this.longPressTimer);
    }
  }
}

2. 修改事件监听和回调函数 #

首先更新HTML，同时监听keydown和keyup事件：

<input (keydown)="fixIePosition($event)" (keyup)="fixIePosition($event)">

然后修改fixIePosition方法，加入长按检测逻辑：

fixIePosition(e: KeyboardEvent) {
  const isIEOrEdge = navigator.userAgent.indexOf('Trident') !== -1 || navigator.userAgent.indexOf('Edge') !== -1;
  const isBackspace = e.keyCode === 8;

  // 非IE/Edge或非退格键直接返回
  if (!isIEOrEdge || !isBackspace) return;

  const targetInput = e.target as HTMLInputElement;

  if (e.type === 'keydown') {
    // 仅在首次按下退格键时启动计时器
    if (!this.isBackspacePressed) {
      this.isBackspacePressed = true;
      // 设置500ms后标记为长按，可根据需求调整时长（比如300ms更灵敏）
      this.longPressTimer = window.setTimeout(() => {
        this.isBackspaceLongPressed = true;
        console.log('退格键长按触发');
        // 这里可以添加你需要的长按专属逻辑
      }, 500);
    }

    // 你原有的keydown光标修复逻辑
    const selectionStart = targetInput.selectionStart;
    if (selectionStart === 3) {
      targetInput.setSelectionRange(3, 3);
    } else if (selectionStart === 5) {
      this.ieFixPosition = true;
    }
  } else if (e.type === 'keyup') {
    // 清除计时器，停止长按检测
    if (this.longPressTimer) {
      clearTimeout(this.longPressTimer);
      this.longPressTimer = null;
    }

    // 判断是单次按下还是长按
    if (!this.isBackspaceLongPressed) {
      console.log('退格键单次按下触发');
      // 这里添加单次按下的专属逻辑
    } else {
      // 长按松开后的逻辑（如果需要）
      this.isBackspaceLongPressed = false;
    }

    // 重置退格键按下状态
    this.isBackspacePressed = false;

    // 你原有的keyup光标修复逻辑
    const selectionStart = targetInput.selectionStart;
    if (selectionStart === 4) {
      if (this.ieFixPosition) {
        targetInput.setSelectionRange(selectionStart, selectionStart);
        this.ieFixPosition = false;
      } else {
        targetInput.setSelectionRange(selectionStart - 1, selectionStart - 1);
      }
    }
  }
}

关键逻辑说明 #

• isBackspacePressed：标记退格键是否处于按下状态，避免长按期间浏览器重复触发keydown时多次启动计时器
• longPressTimer：计时器实例，用于延迟标记长按状态，时长可根据你的需求调整（比如500ms是比较通用的长按阈值）
• isBackspaceLongPressed：最终的长按状态标记，在keyup时用来区分单次和长按操作
• 组件销毁时的ngOnDestroy方法：务必清除计时器，防止内存泄漏

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