6

Chrome では、要素の内容がプログラムによって変更された後、入力要素に対して元に戻すが正しく機能しないことに気付きました。ブラウザーごとに異なる動作が得られますが、Chrome ほど悪くはありません。

FF20      good
IE9       some support (undo stack cleared when input loses focus)
Safari5   some support (undo stack cleared when input loses focus)
Chrome26  unreliable

たとえば、スペースを削除するスクリプト (以下の jsfiddle も参照)

  • 「hello!」の前にスペースを入力してください。
  • 入力要素の外側をクリック
  • 入力要素をクリックして Ctrl-Z を押します

今、テキストはなくなっています（丁目で）

ここでjsfiddle

<input type="text" id="input1" value="hello!">

document.getElementById("input1").addEventListener('blur', function(evt){elementLosesFocus(evt, this);}, false);

function elementLosesFocus(evt, caller)
{
    caller.value = caller.value.trim();
}

私が期待できる最善のことは、入力がフォーカスを失ったときに入力の元に戻す履歴を何らかの形でクリアする方法だと思います（IEやSafariの場合のように）。

4

1 に答える 1

4

Chrome はフィールドの状態を保存しませんが、元に戻す/やり直しごとの差分またはデルタのセットを保存します。必要なメモリは少なくなりますが、対処しているバグが発生します。

を使用して、フィールドに値を貼り付けるユーザーを効果的にシミュレートできますdocument.execCommand("insertText", false, "text to insert");。

あなたの特定のケースでは：

  1. まず、フィールドの値を変数に保存します。var temp = caller.value;
  2. 次に、フィールドの値をクリアするか、selectionStart を 0 に、selectionEnd をフィールドの長さに設定します。このようにして、シミュレートされたペーストがフィールドの内容を置き換えます。
  3. 次に、フィールドにフォーカスがあることを確認します。caller.focus();
  4. 最後に、変更された値でユーザーの貼り付けをシミュレートします。document.execCommand("insertText", false, temp.trim());

別のSOの質問でこの解決策を見つけましたhttps://stackoverflow.com/a/10345596/1021426

于 2014-11-19T22:33:18.070 に答える