JavaScript Answers

How to paste as plain text with execCommand in JavaScript?

Spread the love

The execCommand method, while being deprecated, used to be a way to interact with rich text editing features in browsers.

However, it doesn’t directly support pasting as plain text.

Instead, you typically handle pasting as plain text by capturing the paste event and manipulating the clipboard data.

Here’s how you can achieve paste as plain text using the paste event:

<!-- HTML -->
<textarea id="myTextarea" placeholder="Paste text here..."></textarea>
<button onclick="pasteAsPlainText()">Paste as Plain Text</button>

<!-- JavaScript -->
function pasteAsPlainText() {
    // Add event listener for the paste event
    document.getElementById('myTextarea').addEventListener('paste', function(e) {
        // Prevent default behavior
        // Get the clipboard data as plain text
        var clipboardData = e.clipboardData || window.clipboardData;
        var pastedText = clipboardData.getData('text/plain');
        // Insert the plain text into the textarea
        var textarea = document.getElementById('myTextarea');
        var startPos = textarea.selectionStart;
        var endPos = textarea.selectionEnd;
        var textBefore = textarea.value.substring(0, startPos);
        var textAfter = textarea.value.substring(endPos);
        textarea.value = textBefore + pastedText + textAfter;

In this example, we have a <textarea> element where users can paste text.

We also have a button that triggers the pasteAsPlainText function when clicked.

Inside the pasteAsPlainText function, we add an event listener for the paste event on the <textarea>.

When the paste event occurs, we prevent the default paste behavior.

We then access the clipboard data using e.clipboardData or window.clipboardData (for older browsers) and retrieve the plain text content using getData('text/plain').

Finally, we insert the plain text into the <textarea> at the current cursor position.

This way, you can handle pasting as plain text without relying on the deprecated execCommand method.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *