重新调度KeyboardEvent

Question

使用Angular / TypeScript应用程序，我们有自定义基本文本编辑器。

尝试在用户具有突出显示的选择时进行适当处理，然后点击一个键，打算替换选择。

为了解决这个问题，我们需要正确删除隐藏的＆＃34;他们在插入预期内容之前选择的组件。

我最初的想法是：

1. 捕获KeyDown事件
2. 检查是否选择了突出显示的范围
3. 如果是，请删除所有选定的内容
4. 重新调度KeyDown事件，以便插入适当的内容

这是我们的onKeyDown方法的截断版本：

cloneKeyboardEvent(eventToClone): KeyboardEvent {
    return new KeyboardEvent(eventToClone.type, {
        key: eventToClone.key,
        code: eventToClone.code,
        location: eventToClone.location,
        ctrlKey: eventToClone.ctrlKey,
        shiftKey: eventToClone.shiftKey,
        altKey: eventToClone.altKey,
        metaKey: eventToClone.metaKey,
        repeat: eventToClone.repeat
    });
}

onKeyDown($event: KeyboardEvent) {
    // Check if there's a selection
    if (this.isSelectionRange) {
        Helpers.stopEvent($event);

        // Delete components in selection
        this.deleteComponentsInSelection($event);

        const clonedEvent = this.cloneKeyboardEvent($event);
        document.dispatchEvent(clonedEvent);

        return true;
    }
}

一切都达到了＃4。

clonedEvent与原始事件相匹配，但不会触发。我在debugger的开头添加了onKeyDown()，并且只在初始keydown上点击一次，而不是在dispatchEvent()上点击。