Undo/Redo Functionality For Form Fields – undoRedo.js

Category: Form , Javascript | August 21, 2021
Views Total:658 views
Official Page:Go to website
Last Update:August 21, 2021


Undo/Redo Functionality For Form Fields – undoRedo.js


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

3. Initialize the undoRedo.js.


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.


You Might Be Interested In:

Leave a Reply