UndoRedo.js is a powerful and simple JavaScript library that provides archives of the undo/redo function and applies undo and redo functions to text fields.
The plugin provides a history function that records what you’ve written for undo and redo functions.
Usage:
This package is useful for any step-by-step task, for example:
- Undo / redo function for text input.
- Something like browser history.
- Settings page.
- File Explorer.
- Calculator (why not xD).
- And more …
Notes:
- This is my first package, leave a star if you like <3.
- You are free to suggest anything and I will try to add it soon if I find it useful.
- If you find any error (including the README file) don’t hesitate to help fix it.
- Please report any bugs.
- Made with ❤ in Algeria 🇩🇿.
How to make use of it:
1. Import the UndoRedo.js library into the doc.
<script src="src/UndoRedo.js"></script>
2. Initialize the UndoRedo.js library and decide the cooldown used for recording the information.
const txtHistory = window.UndoRedojs(5);
3. Add event listeners for inputs in your text field.
<textarea id="input"></textarea>
const textarea = document.querySelector("#input");
textarea.addEventListener('input', () => {
// Check if the new textarea value is different
if (txtHistory.current() !== textarea.value) {
// Check for pastes, auto corrects..
if ((textarea.value.length - txtHistory.current().length) > 1 || (textarea.value.length - txtHistory.current().length) < -1 || (textarea.value.length - txtHistory.current().length) === 0) {
// Record the textarea value and force to bypass cooldown
txtHistory.record(textarea.value, true);
// Check for single key press, single chacacter paste..
} else {
// Record the textarea value
txtHistory.record(textarea.value);
}
}
});4. Some browsers will auto-fill the textarea once more after reloading, it will cope with that.
setTimeout(() => {
if (textarea.value) txtHistory.record(textarea.value, true);
}, 100);5. Enable the undo/redo functionalities.
if (txtHistory.undo(true) !== undefined) {
textarea.value = txtHistory.undo();
}
if (txtHistory.redo(true) !== undefined) {
textarea.value = txtHistory.redo();
}Undo/Redo And History, UndoRedo.js Plugin/Github
See Demo And Download
Official Website(iMrDJAi): Click Here
This superior jQuery/javascript plugin is developed by iMrDJAi. For extra Advanced Usages, please go to the official website.