Angular如何实现点击按钮触发Ctrl+z、Ctrl+y等键盘事件？

核心问题原因 #

• 事件派发目标错误
  你当前向id为undoBt的元素派发键盘事件，但首先你的HTML模板中按钮的id是btn1，二者不匹配无法获取到元素；其次浏览器原生的撤销/重做快捷键行为是作用在**当前处于聚焦状态的可编辑元素（input、textarea、contenteditable元素等）**上的，向按钮派发事件完全不会触发对应编辑行为。
• isTrusted属性为只读属性
  该属性由浏览器内核自动赋值，只有用户真实交互触发的事件才会被标记为true，所有JS脚本生成的自定义事件该属性永久为false。浏览器为了防止恶意脚本模拟用户操作，对撤销/重做这类默认快捷键行为都会校验isTrusted属性，脚本模拟的键盘事件默认会被拦截，不会触发原生行为。
• 组合键模拟逻辑无效
  就算你将事件派发到正确的可编辑元素，当前主流浏览器都对脚本模拟的系统级/编辑类组合键做了拦截限制，不会响应非用户真实触发的这类快捷键事件。

可行解决方案 #

不要尝试模拟键盘事件实现需求，直接调用编辑指令API即可：
如果是要触发浏览器原生可编辑区域的撤销/重做行为，使用document.execCommand即可，该API虽然被标记为废弃，但所有主流浏览器都兼容编辑场景的使用：

// 撤销功能
undoText(event: MouseEvent) {
    // 替换为你实际要操作的可编辑元素的选择逻辑
    const targetEditEl = document.querySelector('.your-edit-element') as HTMLElement;
    if (targetEditEl) {
        // 先让可编辑元素获得焦点，确保指令作用在正确的上下文
        targetEditEl.focus();
        document.execCommand('undo');
    }
}

// 重做功能同理
redoText(event: MouseEvent) {
    const targetEditEl = document.querySelector('.your-edit-element') as HTMLElement;
    if (targetEditEl) {
        targetEditEl.focus();
        document.execCommand('redo');
    }
}

如果你的编辑能力是自定义实现的，有自己维护的撤销重做栈，直接调用你自身业务逻辑中的撤销/重做方法即可，不需要和浏览器快捷键行为挂钩。

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