javascript - 当前文档处于设计模式时是否可以捕获 KeyDown 事件？

Question

如您所知，大多数富文本编辑器都使用 iframe 来创建所见即所得编辑器。在 iframe 中包含处于设计模式的文档。我想捕获当用户在富文本编辑器中按“@”字符时的按键事件以显示自动完成功能。

顺便说一句，我在设计模式中看不到任何触发的事件。我该如何解决这个问题？

Answer 1

在打开 designMode 的情况下，完全可以捕获文档中的所有关键事件，尽管您必须在 Firefox 中的 document 上使用 addEventListener(以及可能的其他)，而不是将您的处理程序分配给 document.onkeypress。

要捕获用户键入“@”字符(或实际上任何可打印字符)，您应该使用 keypress 事件而不是 keydown。

// Assuming you have a reference to your iframe in a variable called 'iframe':

function handleIframeKeyPress(evt) {
    evt = evt || iframe.contentWindow.event;
    var charCode = evt.keyCode || evt.which;
    var charTyped = String.fromCharCode(charCode);
    if (charTyped === "@") {
        alert("@ typed");
    }
}

var doc = iframe.contentWindow.document;

if (doc.addEventListener) {
    doc.addEventListener("keypress", handleIframeKeyPress, false);
} else if (doc.attachEvent) {
    doc.attachEvent("onkeypress", handleIframeKeyPress);
} else {
    doc.onkeypress = handleIframeKeyPress;
}