javascript - テキストエリアへのテキストのプログラムによる挿入を「元に戻す」にはどうすればよいですか?

Question

テキストエリアとボタンがあります。ボタンをクリックすると、テキストがテキストエリアに挿入されます。

ユーザーが Ctrl/Cmd+z を押してテキストの挿入を元に戻し、テキストエリアを以前の状態に戻す方法はありますか?

Answer 1

ユーザーが通常の取り消し/やり直し動作を使用できるように、特別な方法でテキストを挿入する必要があります。

var textEvent = document.createEvent('TextEvent');

textEvent.initTextEvent('textInput', true, true, null, "new text");

document.getElementById("your-textarea").dispatchEvent(textEvent);

Answer 2

の元の値を に保存しtextareaますdata。

var $textarea = $('textarea');

$('button').on('click', function () {
    var val = $textarea.val();

    $textarea.data('old-val', val).val(val + ' some text');
});

データの配列が必要な場合（@ahrenが提案したように）、これを使用します：

var $textarea = $('textarea');

$('button').on('click', function () {
    var val = $textarea.val();

    if ( ! $textarea.data('old-val')) {
        $textarea.data('old-val', []);
    }

    $textarea.data('old-val').push(val);

    $textarea.val(val + ' some text');
});

Answer 3

この質問は 1 年前のものですが、私のやり方も共有したいと思います。

次のように実行できます。

    $(function () {

  // Check to see if an array is not already defined.
  if (!$('#t').data('old-val')) {

    // If the check returns True we proceed to create an array in old-val.
    $('#t').data('old-val', []);

  }

  // Get the current content value.
  inputValue = $('#t').val();

  // Push it to the old-val array.
  $('#t').data('old-val').push(inputValue);

  // We start with a current array position of 0.
  curArrPos = 0;


  $('#c').click(function () {
    // Append a string to the #t.
    $('#t').val(' ==this is the 2nd appended text==');


    // Save the current content value.
    inputValue = $('#t').val();
    // Push it to the array.
    $('#t').data('old-val').push(inputValue);
    // Increment current array position.
    ++curArrPos;

  });


  $('#b').click(function () {
    // Append a string to the #t.
    $('#t').val(' ==this is the 1st appended text==');


    // Save the current content value.
    inputValue = $('#t').val();
    // Push it to the array.
    $('#t').data('old-val').push(inputValue);
    // Increment current array position.
    ++curArrPos;

  });

  $('#undo').click(function () {
    // First check that the old-val array length is greater than 1 (It's the initial position. No need undoing to a blank state) and current array position greater than 0 (for the same reason).
    if ($('#t').data('old-val').length > 1 && curArrPos > 0) {

      // Set current #t value to the one in the current array position, minus one.
      // Minus one gets you to the previous array position (ex. current=5; previous= current - 1 = 4).
      $('#t').val($('#t').data('old-val')[curArrPos - 1]);

      // Decrease current array position, because we effectively shifted back by 1 position.
      --curArrPos;
    }
  });

  $('#redo').click(function () {
    if (currentArrayPos < $('#c').data('old-val').length - 1) {

      $('#t').val($('#t').data('old-val')[curArrPos + 1]);

      // Increase current array position, because we effectively shifted forward by 1 position.
      ++curArrPos;

    }
  });

});

実験したい場合は、ここにフィドルがありますhttp://jsfiddle.net/45Jwz/1/

私は理解を深めるためにこのようなコードを書きましたが、もちろん、実際のコードはこれよりも適切で簡潔に書く必要があります。

Answer 4

$("#target").keypress(function(event) {
  if ( event.which == 'Z' && first press == 'Cmd' && second press == 'Ctrl') {//check for key press
     event.preventDefault();
    text.value = defaultValueForTextField
   }
});

それはあなたが探しているものでなければなりません。1 回目と 2 回目のプレスは、必要に応じてコンボ プレスとして保存する必要があります。ただし、実際にはデフォルトのテキスト値を保存する必要があります。

Answer 5

ここには、あなたが望むものに役立つ適切な答えがたくさんあります。これがあなたの状況で私がすることです。これにより、最も使用する可能性が高いテキスト変数の変更が可能になり、それを設定したり、ユーザーが別のフィールドで設定したりできます。

コードペンはこちら

要旨はこんな感じです。

$(document).ready(function(){
  function deployText(){
    var textArray = [];
    var textToAdd = 'let\'s go ahead and add some more text';
    var textarea = $('textarea');
    var origValue = textarea.text();
    textArray.push(origValue);

    $('button').on('click', function(e){
      textArray.push(textToAdd);
      textarea.text(textArray);
      console.log(textArray.length);
      console.log(textArray);
    });

    $(document).on('keypress', function(e){
      var zKey = 26;
      if(e.ctrlKey && e.which === zKey){
        removePreviousText();
      }
    })

    function removePreviousText(){
      console.log(textArray);
      if(textArray.length > 1){
        textArray.pop();
        $('textarea').text(textArray);
      }
    }
  }
  deployText()
})