如何实现JavaScript自定义快捷键不触发文本输入框内的对应操作

你只需要在触发快捷键逻辑前，先判断当前焦点是否落在可输入类元素上，排除这些场景即可。

修改后代码 #

$(function(){
    document.onkeydown = function(evt) {
        evt = evt || window.event;
        // 新增：判断当前焦点元素是否为可输入元素
        const activeEl = document.activeElement;
        const isInput = activeEl.tagName === 'INPUT' || 
                        activeEl.tagName === 'TEXTAREA' || 
                        activeEl.isContentEditable;
        // 输入场景直接返回，不触发自定义逻辑
        if (isInput) return;

        if (evt.ctrlKey && evt.keyCode == 90) {
            alert("Ctrl-Z");
        }
    };
});

逻辑说明 #

• 通过document.activeElement获取当前页面获得焦点的元素
• 判断逻辑覆盖三类常见输入场景：
  • 普通<input>输入框
  • 多行文本<textarea>
  • 开启了contenteditable属性的富文本编辑元素（YouTube评论区属于这类元素）
• 匹配到输入场景时直接终止后续逻辑，不会影响原生输入框的撤销、输入等默认操作

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