Paste onto a [contenteditable] element as plain text

paste.js

document.querySelector('[contenteditable]').addEventListener('paste', function (event) {
  event.preventDefault();
  document.execCommand('inserttext', false, event.clipboardData.getData('text/plain'));
});

@jp3492 See here. https://htmldom.dev/paste-as-plain-text/

As @jp3492 has said, the execCommand API is deprecated. The following code works the same by just setting the inner text of the target element.

function pasteAsPlainText(event) {
  event.preventDefault();
  event.target.innerText = event.clipboardData.getData("text/plain");
}

As @jp3492 has said, the execCommand API is deprecated. The following code works the same by just setting the inner text of the target element.

function pasteAsPlainText(event) {
  event.preventDefault();
  event.target.innerText = event.clipboardData.getData("text/plain");
}

This is fine if you want the clipboard text to replace everything inside the target element, but not if you want to preserve any content that may already be present in the target. For example, I am writing this message now, and if I were to paste some text after this paragraph, I would expect everything I've written up until now to be preserved; however, replacing the inner text would replace everything.