javascript - contenteditabledivでundo/redoイベントをリッスンします

Question

ユーザーがcontenteditabledivで取り消しをトリガーできるすべての方法をリッスンする方法はありますか？たとえば、ユーザーがControl + Zを押すと、右クリック-> [元に戻す]、またはファイルメニューの[編集]->[元に戻す]が表示されます。

私は元に/やり直しのアルゴリズムや実装を探しているのではなく、イベントをリッスンして動作を上書きする機能だけを探しています。

Answer 1

event.inputTypeあなたはinputイベントを得ることができます。"historyUndo"/を確認してください"historyRedo"：

var div = document.getElementById("mydiv");
div.addEventListener("input", function(e) {
  switch(e.inputType){
    case "historyUndo": alert("You did undo"); break;
    case "historyRedo": alert("You did redo"); break;
  }
});

<div id="mydiv" contenteditable="true">Hello world!</div>

最近のブラウザでは、イベントを使用してイベントをキャンセルできますbeforeinput（Firefoxにはまだありません）。

var div = document.getElementById("mydiv");
div.addEventListener("beforeinput", function(e) {
  switch(e.inputType){
    case "historyUndo": e.preventDefault(); alert("Undo has been canceled"); break;
    case "historyRedo": e.preventDefault(); alert("Redo has been canceled"); break;
  }
});

<div id="mydiv" contenteditable="true">Hello world!</div>

参照：

• InputEvent仕様およびその他のinputType値：https ：//w3c.github.io/input-events/#interface-InputEvent-Attributes
• ブラウザの互換性beforeinput：https ：//caniuse.com/#feat=mdn-api_htmlelement_beforeinput_event

Answer 2

Ctrl + Z / Yは可能ですが、右クリック->元に戻す/やり直しの部分についてはわかりません。

$(document).keydown(function (e) {
    var thisKey = e.which;

    if (e.ctrlKey) {
        if (thisKey == 90) alert('Undo');
        else if (thisKey == 89) alert('Redo');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

JavaScriptを使用してCtrl+V、Ctrl + Cを検出する方法でzの例を制御しますか？

右クリックの場合、右クリックでdivを表示できますJavaScriptで右クリックイベントをキャプチャするにはどうすればよいですか？

次に、divの[元に戻す]オプションをクリックしたとき。onclick関数を入れるだけです。