Summary: Code snippets of a copy to clipboard JS snippet in JavaScript and a jQuery version.
Copy text to clipboard
Have you ever needed a snippet to copy text with JavaScript directly to your clipboard? If so, today is your lucky day — because we’re going to talk all about how you can code copy text to clipboard in a breeze.
We’ll walk through exactly what copying text to clipboard means and demonstrate how easy it really is in just a few steps – hope you enjoy!
Browser support
With modern browsers, you can easily take advantage of Javascript’s copy-and-paste abilities. You don’t have to limit yourself only using URL links. With JS capabilities, this easily lets users quickly copy text directly onto their clipboard. Keep reading to learn more about taking advantage of copying with JavaScript today!
Copying text with JavaScript
Every web page has a different need. Sometimes you need a quick functionality to allow users t use their clipboard to copy text to clipboard and paste it somewhere. Usually the text to the clipboard functionality users copy a URL and paste it – copying a link. There are many reason why you wouldn’t want a simple URL link.
First, create the text field and the button:
<input type="text" id="url-field"> <button id="copy-button">Copy</button>
Next, add an event listener to the button that listens for clicks, and implement the copy behavior in the event handler function:
const copyButton = document.querySelector('#copy-button');
copyButton.addEventListener('click', () => {
// Select the text field's content
const urlField = document.querySelector('#url-field');
urlField.select();
// Copy the text field's content
document.execCommand('copy');
});
When the user action hits control + v or command + v the clipboard the clipboard write occurs.
Lets do clipboard with javascript again with jQuery
First, create the text field and the button:
<input type="text" id="url-field"> <button id="copy-button">Copy</button>
Next, use the click method to add a click event handler to the button, and implement the copy behavior in the event handler function:
$('#copy-button').click(() => {
// Select the text field's content
$('#url-field').select();
// Copy the text field's content
document.execCommand('copy');
});
Copying whatever is typed into the text field has never been easier! Just click on the box and then hit that copy button. Make sure you’ve selected your desired content first, though – this feature relies on having a focused selection so it can do all its magic behind-the-scenes.
With just a few lines of code, you can quickly and effortlessly copy text strings into your clipboard using either JavaScript or jQuery. It’s an incredibly straightforward process that makes it easy to add this functionality to any page!
Simon is a Product Designer and Front End Dev with over 20 years of experience. He started as a graphic designer and illustrator coding his first website in 1996. He has worked with brands like Publix, Microsoft, and Discovery Channel.
