javascript - 現在のドキュメントがデザイン モードのときに KeyDown イベントをキャプチャすることはできますか?

Question

ご存知のように、リッチ テキスト エディターのほとんどは iframe を使用して WYSIWYG エディターを作成します。iframe には、デザイン モードのドキュメントが含まれます。ユーザーがリッチテキストエディターで「@」文字を押してオートコンプリートを表示したときに、キーダウンイベントをキャプチャしたいと考えています。

ところで、デザインモード内で発生したイベントは表示されません。どうすればこの質問を解決できますか?

Answer 1

designModeon をオンにすると、ドキュメント内のすべての主要なイベントをキャプチャすることは完全に可能ですが、ハンドラーを に割り当てるのではなく、Firefox (およびおそらく他のもの) でaddEventListeneronを使用する必要があります。documentdocument.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;
}