如何为其他按键重构Delete键功能？遇重复触发问题求助

你遇到的问题核心在于重复绑定事件：每次触发keydown时，都会给输入框新增一个keyup事件监听。随着按键次数增加，输入框上会堆积大量keyup监听函数。同时因为闭包特性，这些监听函数里的e始终引用第一次触发keydown时的事件对象——如果第一次按的是空格，后续所有keyup都会满足e.keyCode === 32的判断，执行删除操作。

直接在输入框上绑定一次keydown事件（无需嵌套绑定），判断按下的是空格时，执行删除逻辑并阻止默认行为，同时调整光标位置：

// 只绑定一次事件，避免重复监听
$(".mat-input-element").on("keydown", function(e) {
    // 仅处理空格按键
    if (e.keyCode === 32) {
        e.preventDefault(); // 阻止空格输入
        const caretPos = this.selectionStart;
        let inputValue = this.value;
        
        // 执行删除逻辑：删除光标后一个字符（模拟Delete键）
        inputValue = inputValue.slice(0, caretPos) + inputValue.slice(caretPos + 1);
        this.value = inputValue;
        
        // 调整光标位置到删除后的位置
        this.selectionStart = this.selectionEnd = caretPos;
    }
});

对应的HTML保持不变：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="mat-input-element">

• 如果需要模拟Backspace键（删除光标前的字符），只需要把slice(caretPos + 1)改成slice(caretPos - 1)，同时调整光标位置为caretPos - 1（注意处理光标在开头的边界情况）。
• 绝对不要在事件监听内部嵌套绑定其他事件，这会导致事件监听堆积，引发不可预期的行为。

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