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

Question

As you know, most of rich text editor use iframe to create WYSIWYG editor. In iframe contain document that is in design mode. I want to capture key down event when user press '@' character in rich text editor for displaying autocomplete for it.

By the way, i cannot see any fired event inside design mode. How can I solve this question?

Answer 1

It's perfectly possible to capture all key events in documents with designMode turned on, though you have to use addEventListener on document in Firefox (and possibly others) rather than assigning your handler to document.onkeypress .

To capture the user typing the '@' character (or indeed any printable character), you should use the keypress event rather than 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;
}