-
-
Save cesarfigueroa/27d332384cad45217168 to your computer and use it in GitHub Desktop.
document.querySelector('[contenteditable]').addEventListener('paste', function (event) { | |
event.preventDefault(); | |
document.execCommand('inserttext', false, event.clipboardData.getData('text/plain')); | |
}); |
Since execCommand is discouraged to use as stated in the official MDN docs as well as w3school, I wonder if this is possible without execCommand. I need to figure this out for work and really cant come to a solution. I ultimately need to prevent formatted text to be pasted, with the cursor in the right place and no execCommand. Any ideas?
You could always intercept the data and manually insert it as the innerText of the "content editable" element.
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.
Works like charm! Thanks 👍