Posted on Oct 22, 2021

Copy text to clipboard in JS(two ways)

Of course the user can just select the text and copy it but giving them a button that they can click to copy it seems like a better idea(better UX). So in this article I will show you how you can copy text to clipboard using JavaScript.

1. Old method

the old way to copy text to clipboard is

create a textarea(Or input)
put the text you want to copy in that textarea
add textarea to your page
select the text in textarea
execute copy command
remove it from your page

function copyToClipboard(text){ const textArea = document.createElement("textarea") textArea.value = text document.body.appendChild(textArea) textArea.focus() textArea.select() document.execCommand('copy') document.body.removeChild(textArea) }

2. New method

For newer browsers we can simply use the navigator.clipboard to copy text

function copyToClipboard(text){ navigator.clipboard.writeText(text) }

3. Bonus

Now we can combine these two approach and create a function that would use the navigator.clipboard in modern browsers and fall back to old approach when needed

function copyToClipboard(text){ if(navigator.clipboard){ navigator.clipboard.writeText(text) return //codes below wont be executed } const textArea = document.createElement("textarea") textArea.value = text document.body.appendChild(textArea) textArea.focus() textArea.select() document.execCommand('copy') document.body.removeChild(textArea) }