ユーザーがcontenteditabledivで取り消しをトリガーできるすべての方法をリッスンする方法はありますか?たとえば、ユーザーがControl + Zを押すと、右クリック-> [元に戻す]、またはファイルメニューの[編集]->[元に戻す]が表示されます。
私は元に/やり直しのアルゴリズムや実装を探しているのではなく、イベントをリッスンして動作を上書きする機能だけを探しています。
ユーザーがcontenteditabledivで取り消しをトリガーできるすべての方法をリッスンする方法はありますか?たとえば、ユーザーがControl + Zを押すと、右クリック-> [元に戻す]、またはファイルメニューの[編集]->[元に戻す]が表示されます。
私は元に/やり直しのアルゴリズムや実装を探しているのではなく、イベントをリッスンして動作を上書きする機能だけを探しています。
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-Attributesbeforeinput
:https ://caniuse.com/#feat=mdn-api_htmlelement_beforeinput_eventCtrl + 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>
JavaScriptを使用してCtrl+V、Ctrl + Cを検出する方法でzの例を制御しますか?
右クリックの場合、右クリックでdivを表示できますJavaScriptで右クリックイベントをキャプチャするにはどうすればよいですか?
次に、divの[元に戻す]オプションをクリックしたとき。onclick関数を入れるだけです。