Is it possible to edit a text input with javascript and add to the Undo stack?

Question

Is there a way to edit the contents of an input or textarea with javascript, and have that change be undo-able with the browser's "undo" command (eg ctrl-Z)?

I am trying to insert a string, such as "Foo {0} bar", into the value at the selection, and if the user has selected a range, the selected range is inserted into the string in place of the "{0}".

For example if the textarea contains "Example 1 2 3" and the cursor is at "Example 1| 2 3", then the function would change the value to "Example 1Foo blah bar 2 3" (valueIfNothingSelected being "blah" in this case). If the range "1 2" was selected, the function would instead change the value to "Example Foo 1 2 bar 3".

In Chrome I tested this function out, and it does what it is supposed to, but I cannot reverse the change with undo.

function insertTextAtCursor(text, valueIfNothingSelected) {
    var field = $('textarea[name="task_log_description"]')[0];
    var startPos = field.selectionStart;
    var endPos = field.selectionEnd;
    var processedText;
    if (startPos == endPos) {
        processedText = text.replace('{0}', valueIfNothingSelected);
        field.value = field.value.substring(0, startPos) + processedText + field.value.substring(endPos, field.value.length);
        field.selectionStart = startPos + text.indexOf('{0}');
        field.selectionEnd = field.selectionStart + valueIfNothingSelected.length;
    } else {
        var selectedText = field.value.substring(startPos, endPos);
        processedText = text.replace('{0}', selectedText);
        field.value = field.value.substring(0, startPos) + processedText + field.value.substring(endPos, field.value.length);
        field.selectionStart = startPos + text.indexOf('{0}');
        field.selectionEnd = field.selectionStart + selectedText.length;
    }
    field.focus();
}

ctrl-z already works for me in Chrome+Firefox on Ubuntu 14.04. What's the situation where it's not working for you? — Jack
– Jack, Commented Nov 19, 2014 at 22:09
@Jack Expanded question to include my javascript method. For whatever reason, Ctrl-z doesn't work when this method is used. — Marsh
– Marsh, Commented Nov 19, 2014 at 22:18

Community · Accepted Answer · 2017-05-23 11:47:01Z

21

I found a solution that works at https://stackoverflow.com/a/10345596/1021426

By replacing the "field.value = ..." lines with:

document.execCommand("insertText", false, processedText);

...and moving "field.focus()" to before that line, I was able to achieve the undo/redo functionality I desired.

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Nov 19, 2014 at 22:27

Marsh

8,1659 gold badges55 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

krivar Over a year ago

it's funny how google works, this is the front result, not the one you linked to :D

Lance Pollard Over a year ago

stackoverflow.com/questions/60581285/…

K0IN Over a year ago

Warning this function is deprecated see developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

fregante · Accepted Answer · 2023-04-25 18:13:53Z

3

Edit: Firefox now supports execCommand too. You just need that.

Here's a solution which works in Firefox too, is the most performant one and offers undo functionality everywhere except Firefox (where it just isn't possible natively)

// Solution
function insertText(textarea, text) {
    // https://stackoverflow.com/a/55174561/288906
    if (!document.execCommand('insertText', false, text)) {
        textarea.setRangeText(text);
    }
}

// Demo code to add text on click
const textarea = document.querySelector('textarea');
textarea.onclick = () => insertText(
  textarea,
  '@'
);

<textarea>Click in here to add text</textarea>

I also packaged this up as an npm module, improving consistency across browsers and adding utilities like "insert", "replace", "search and replace", etc

edited Apr 25, 2023 at 18:13

answered Mar 15, 2019 at 2:03

fregante

32.4k17 gold badges133 silver badges175 bronze badges

Comments

RedDragonWebDesign · Accepted Answer · 2020-11-06 12:08:50Z

0

Here's code to replace the contents of a <textarea> instead of just inserting.

function setValueAndUpdateUndoStack(textarea, text) {
    // Must select all, so that the old text is deleted.
    textarea.focus();
    textarea.select();
    
    // https://stackoverflow.com/a/55174561/3480193
    if ( ! document.execCommand('insertText', false, text) ) {
        textarea.setRangeText(text);
    }
}

answered Nov 6, 2020 at 12:08

RedDragonWebDesign

2,7572 gold badges27 silver badges26 bronze badges

Collectives™ on Stack Overflow

Is it possible to edit a text input with javascript and add to the Undo stack?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related