1. Load the principle script undoRedo.js within the document.

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

2. Add the CSS class undoredo to form fields on which you wish to allow 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 web 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.

main(20);

See Demo And Download