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

Question

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

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

Answer 1

designMode尽管您必须在 Firefox（可能还有其他）中使用onaddEventListener而document不是将处理程序分配给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;
}