OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How can I preserve undo History When Programmatically Changing the Value of a Textarea in JavaScript without document.execCommand?

  • Thread starter Thread starter goalTosin
  • Start date Start date
G

goalTosin

Guest
I created a textarea, and set the value of the textarea to something else. However, when the user presses Ctrl+Z, the textarea does not restore the value it had before programmatically changing its value. How do I make sure that programmatically changing the value of the textarea, does not clear it's undo history?

Code:
let test = document.getElementById('test')
function changeVal() {
   test.value += 'Hello world'
   test.focus()
}

Code:
#test {
   width: 100%;
   height: 10em;
}

Code:
<textarea id="test" placeholder="Enter some text"></textarea>
<button onclick="changeVal()">Change value</button>

Now, I know how to solve this problem only with document.execCommand('insertText' or 'delete'), but now that document.execCommand is deprecated, how can I solve this problem?

<p>I created a textarea, and set the value of the textarea to something else. However, when the user presses <kbd>Ctrl+Z</kbd>, the textarea does not restore the value it had before programmatically changing its value. How do I make sure that programmatically changing the value of the textarea, does not clear it's undo history?</p>

<pre class="lang-js prettyprint-override"><code>let test = document.getElementById('test')
function changeVal() {
test.value += 'Hello world'
test.focus()
}
</code></pre>
<pre class="lang-css prettyprint-override"><code>#test {
width: 100%;
height: 10em;
}
</code></pre>
<pre class="lang-html prettyprint-override"><code><textarea id="test" placeholder="Enter some text"></textarea>
<button onclick="changeVal()">Change value</button>
</code></pre>

<p>Now, I know how to solve this problem only with <code>document.execCommand('insertText' or 'delete')</code>, but now that document.execCommand is deprecated, how can I solve this problem?</p>
 
Top