Undo/Redo Functionality For Form Fields – undoRedo.js

Preview:

Description:

undoRedo.js is a tiny JavaScript library that enables undo and redo functionalities on HTML form elements like input, textarea, checkbox, radio button, etc.

See Also:

Undo/Redo And History In Text Field – UndoRedo.js

How to use it:

1. Load the main script undoRedo.js in the document.

<script src="scripts/undoRedo.js" type="text/javascript" ></script>

2. Add the CSS class undoredo to form fields on which you want to enable the undo and redo functionalities.

<div class="inputpair">
  <label for="textInput">Text Input:</label>
  <input class="undoredo" type="text" name="textInput" id="textInput">
</div>
<div class="inputpair">
  <label for="dateInput">Date Input:</label>
  <input class="undoredo" type="date" name="dateInput" id="dateInput">
</div>  
<div class="inputpair">
  <label for="timeInput">Time Input:</label>
  <input class="undoredo" type="time" name="timeInput" id="timeInput">
</div>
<div class="inputpair">
  <label for="checkboxInput">Checkbox Input:</label>
  <input class="undoredo" type="checkbox" name="checkboxInput" id="checkboxInput">
</div>
<div class="inputpair">
  <label for="radioInput">Radio Button Input:</label>
  <input class="undoredo" type="radio" name="radioInput" id="radioInput">
</div>
<div class="inputpair">
  <label for="textArea">Text Area:</label>
  <textarea class="undoredo" id="textArea"></textarea>
</div>

3. Initialize the undoRedo.js.

main();

4. Add undo & redo buttons to the page.

<input onclick="undoEvent()" type="button" class="undoredo" name="undo" id="undo" value="">
<input onclick="redoEvent()" type="button" class="undoredo" name="redo" id="redo" value="">

5. Determine the max number of undos. Default: 10.

main(20);