DEV Community

Saravana Kumar Putta Selvaraj
Saravana Kumar Putta Selvaraj

Posted on

JS:Snippets — Copy text to the clipboard using javascript in 5 minutes.

#javascript #html #webdev

In this article, we are going to build the functionality of copying the text to the clipboard using javascript in 5 minutes.

HTML STRUCTURE 

<div> <input type="text" id="text" placeholder="Enter text"/> <button onClick="copyTextToClipBoard()">Copy To ClipBoard</button> </div>
Enter fullscreen mode Exit fullscreen mode

JS Function 

function copyTextToClipBoard(){ //Input Element with id "text" let textToBeCopied = document.getElementById('text'); //Select the content in the input element textToBeCopied.select(); textToBeCopied.setSelectionRange(0, 99999); //copy the text inside the input element to clipboard document.execCommand('copy'); alert('Text copied to Clipboard'); }
Enter fullscreen mode Exit fullscreen mode

Buit-in Functions used

select
setSelectionRange
execCommand

Full code

Codepen

This article is made with ❤️. Please let me know what content you want me to write. Always for you.

Top comments (0)