JavaScript Clipboard String Copy

Copying Strings to Clipboard with JavaScript

A memo on how to copy strings to the clipboard with JavaScript. To copy to the clipboard with JavaScript, as explained here, the process involves placing a textarea or input tag in HTML, selecting the text in it, and automating the copying.

Shou Arisaka
2 min read
Nov 18, 2025

A memo on how to copy strings to the clipboard with JavaScript.

To copy to the clipboard with JavaScript,

  • [How To Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp)
As explained here, the process involves placing a textarea or input tag in HTML, selecting the text in it, and automating the copying.

Very detailed code was introduced, so I’ll use it.

  • [How do I copy to the clipboard in JavaScript? - Stack Overflow](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript)
``` function copyTextToClipboard(text) { var textArea = document.createElement("textarea");

// // *** This styling is an extra step which is likely not required. *** // // Why is it here? To ensure: // 1. the element is able to have focus and selection. // 2. if element was to flash render it has minimal visual impact. // 3. less flakyness with selection and copying which might occur if // the textarea element is not visible. // // The likelihood is the element won’t even render, not even a flash, // so some of these are just precautions. However in IE the element // is visible whilst the popup box asking the user for permission for // the web page to copy to the clipboard. //

// Place in top-left corner of screen regardless of scroll position. textArea.style.position = ‘fixed’; textArea.style.top = 0; textArea.style.left = 0;

// Ensure it has a small width and height. Setting to 1px / 1em // doesn’t work as this gives a negative w/h on some browsers. textArea.style.width = ‘2em’; textArea.style.height = ‘2em’;

// We don’t need padding, reducing the size if it does flash render. textArea.style.padding = 0;

// Clean up any borders. textArea.style.border = ‘none’; textArea.style.outline = ‘none’; textArea.style.boxShadow = ‘none’;

// Avoid flash of white box if rendered for any reason. textArea.style.background = ‘transparent’;

textArea.value = text;

document.body.appendChild(textArea); textArea.focus(); textArea.select();

try { var successful = document.execCommand(‘copy’); var msg = successful ? ‘successful’ : ‘unsuccessful’; console.log(‘Copying text command was ’ + msg); } catch (err) { console.log(‘Oops, unable to copy’); }

document.body.removeChild(textArea); }

Copy "hogehoge" to clipboard

copyTextToClipboard(“hogehoge”)

Share this article

Shou Arisaka Nov 18, 2025

🔗 Copy Links