溫馨提示×

textbox怎樣實現(xiàn)撤銷重做

小樊
87
2024-06-29 17:37:40
欄目: 編程語言

要在textbox中實現(xiàn)撤銷和重做功能，可以通過使用JavaScript來實現(xiàn)。以下是一個簡單的示例代碼：

<!DOCTYPE html>
<html>
<head>
  <title>撤銷重做示例</title>
</head>
<body>

<textarea id="myTextarea" rows="4" cols="50"></textarea><br>
<button onclick="undo()">撤銷</button>
<button onclick="redo()">重做</button>

<script>
  var textarea = document.getElementById('myTextarea');
  var undoStack = [];
  var redoStack = [];

  textarea.addEventListener('input', function() {
    undoStack.push(textarea.value);
    redoStack = [];
  });

  function undo() {
    if (undoStack.length > 1) {
      redoStack.push(undoStack.pop());
      textarea.value = undoStack[undoStack.length - 1];
    }
  }

  function redo() {
    if (redoStack.length > 0) {
      undoStack.push(redoStack.pop());
      textarea.value = undoStack[undoStack.length - 1];
    }
  }
</script>

</body>
</html>

在這個示例中，我們?yōu)閠extarea元素添加了一個input事件監(jiān)聽器，當用戶輸入時，會將當前內(nèi)容存入undoStack數(shù)組中，并清空redoStack數(shù)組。點擊撤銷按鈕時，會將當前內(nèi)容彈出undoStack數(shù)組并存入redoStack數(shù)組，然后將上一個內(nèi)容顯示在textarea中。點擊重做按鈕時，會將redoStack數(shù)組中的內(nèi)容彈出并存入undoStack數(shù)組，然后將最后一個內(nèi)容顯示在textarea中。

通過這種方式，我們可以實現(xiàn)簡單的撤銷和重做功能。您也可以根據(jù)自己的需求來擴展和改進這個示例。

0 踩