3

テキストボックスにコンテキストメニューを実装するコードがいくつかあります。コンテキストメニューには、を使用してブラウザーのネイティブメソッドを呼び出すUndoand項目があります。 このコードは Chromium ベースのブラウザーでは必要に応じて機能しますが、FireFox と Opera では期待どおりの結果が得られません。 元に戻すとやり直しは、入力要素のネイティブ ブラウザー コンテキスト メニューのように機能することを期待しています。その結果、入力要素は元に戻したりやり直したりしませんが、属性が設定された div 要素は期待どおりに機能します。 それで、これはブラウザーの 1 つ (Chromium または FireFox/Opera) のバグなのか、それともコードを正しく実装していないのか疑問に思っています。 次のコードは、私が直面している問題の例を示しています。すべての助けに感謝します。Redodocument.execCommand('undo')



contenteditable



<input contenteditable id="input" type="text"></input>
<div contenteditable id="div" class="inputLike" type="text"></div>
<button id="button1" type="button">Undo</button>
<button id="button2" type="button">Redo</button>

var input = document.getElementById("input"),
    button1 = document.getElementById("button1"),
    button2 = document.getElementById("button2"),
    div = document.getElementById("div");

console.log("Undo", document.queryCommandSupported("undo"));
console.log("Redo", document.queryCommandSupported("redo"));

function doUndo() {
    document.execCommand('undo', false, null);
}

function doRedo() {
    document.execCommand('redo', false, null);
}

button1.addEventListener("click", doUndo, false);
button2.addEventListener("click", doRedo, false);

jsfiddleについて

実際のコンテキスト メニュー コードを見たい場合は、jsfiddleでも利用できます。

4

3 に答える 3

3

document.execCommand()少なくとも Firefox では、それが可能だとは思いません。独自の取り消しスタックを作成するか、将来的には新しいUndoManager API ( Firefox 20 で実装されましたが、デフォルトでは無効になっています) を使用できます。

これは、イベントを使用して値と選択のスナップショットを取得することにより、独自の取り消しスタックを使用する例ですinput。たとえば、連続する入力イベントを単一の取り消し項目にマージすることで、これを改善できます。また、ブラウザ間でキャレットの位置に多少の不一致がありますが、これは概念実証にすぎません。

http://jsfiddle.net/FMSsL/

新しい DOM UndoManager API を使用するのは簡単なようです: 私がそれを正しく理解していて、ブラウザーがサポートしている場合、<input>要素にはメソッドundoManagerを持つオブジェクトであるプロパティがあるundo()ためredo()、タスクは次のように単純です。

document.getElementById("input").undoManager.undo();

残念ながら、Firefox 20 以降のみがUndoManagerAPI をサポートしており、デフォルトでは無効になっています。有効にしても、次のデモは動作するはずですが、動作しないため、このオプションは実行可能ではありません。

http://jsfiddle.net/DULV4/2/

于 2013-04-26T09:40:22.723 に答える
0

UNDO と REDO の履歴を取得できます

function check(){
if(document.queryCommandEnabled("undo"))
  {
    $('#undoResult').text("Undo is active");
    }else{
      $('#undoResult').text("Undo is not active");
  }
if(document.queryCommandEnabled("redo"))
  {
    $('#redoResult').text("Redo is active");
    }else{
      $('#redoResult').text("Redo is not active");
  }
  }
  $(document).on('keypress',function(e) {
      if(e.which == 13) {
        document.execCommand("insertLineBreak");
              return false;
      }
      });
  check();
div{
  border:1px solid black;
  height:100px;
}

button{
color:white;
background:black;
height:40px;
width:49%;
padding:1px;
text-align:center;
margin-top:10px;
}

p{
font-size:30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div contenteditable="true">
</div>

<button onclick="document.execCommand('undo',false,null);check()" >Undo</button>

<button onclick="document.execCommand('redo',false,null); check()" >Redo</button>

<p id='undoResult'></p>
<p id='redoResult'></p>

于 2022-02-04T11:45:14.430 に答える