Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

JavaScript to Copy and Paste Text to the Clipboard

By Stephen Bucaro

The execCommand("copy") command copies the current selection to the clipboard. In some applications, rather than the user's selection, you may want to use a link or button to copy the contents of a specific html element to the clip board. The code for this is shown below.

function doCopy(e)
{
   e.preventDefault();
   document.getElementById("exampInput").select();
   document.execCommand("copy");
}

<textarea id="input" rows="4" cols="40"></textarea>

<button id="copy-button" onclick="doCopy(event);">Copy</button>

In this example, the doCopy(event) function first uses preventDefault() to prevent any extraneous text from being copied, then it selects the contents of the <textarea> with id="exampInput", then uses the execCommand("copy") to copy that content to the clipboard on the users device.

Because browser developers don't really want to give webpage programmers access to the contents of the user's clipboard, you can't use a link or button to paste text to a specific html element on a webpage. The user has to initiate the transfer of the clipboard contents by clicking on the browsers Paste menu item, or using the keyboard [Ctrl][v] key combination, which use operating system calls.

But when the user does initiate a Paste, you can direct the contents of the user's clipboard to a specific html element on the webpage. The code for this is shown below.

window.addEventListener("paste", function(ev) 
{
    ev.preventDefault();
    var textData = event.clipboardData.getData("text/plain");
    document.getElementById("pasteTarget").select();
    document.getElementById("pasteTarget").innerText = textData;
});

<textarea id="pasteTarget" rows="4" cols="40"></textarea>

This example adds an EventListener for the paste event that first uses preventDefault() to prevent the browser from pasting text in an undesirable location. Then it uses clipboardData.getData to place the clipboard text in the variable textData. It then selects the element with id="pasteTarget", and uses getElementById("pasteTarget").innerText to put the clipboard contents in the element.

You can test this example by typing some text in the upper textarea, clicking the [Copy] button, and using the browsers Paste menu item, or using the keyboard [Ctrl][v] key combination to make it appear in the lower textarea.

More Java Script Code:
• A Brief Introduction to HTML for JavaScript Programmers
• Java Script Code to Move Items Between Select Lists
• Round a Float to 4 Digits to the Right of the Decimal Point
• Calculators for Your Web Site : Loan Payment Calculator
• Code to Block the Ad Blockers
• HTML5 Canvas JavaScript Code to a Draw Bezier Curve
• Allowing Multiple Selections from Drop-down Select List
• How to Shuffle the Deck With Java Script
• JavaScript Code to Restrict Keyboard Entries
• JavaScript Code to Save and Load a Table Using HTML5 Web Storage