BlogsDope image BlogsDope

Copying Text to Clipboard Using JavaScript

May 13, 2019 JAVASCRIPT TEXT 1136

This is a quick tutorial explaining how to copy text to clipboard with a single button click using JavaScript.

In the following demo, click on the Copy button to copy the text written in the input field to the clipboard. You can also write your own text in the text field and then copy it by clicking on the button.

See the Pen Copy Text to Clipboard by Aakhya Singh (@aakhya) on CodePen.

This is mainly used where users have to copy a long text like a long paragraph, a link or some code, which otherwise will be somewhat more difficult to copy manually.

The Structure

Create an input field with the text to be copied as the value of its attribute value, and create a button on which the user will be clicking to copy the text.

HTML

<!-- text input field -->
<input id="inputText" type="text" value="A miss is as good as a mile">

<!-- button -->
<button id="copyText">Copy</button>

The Styling

Style the text field and the button.

CSS

/* styling text input field */
#inputText {
  padding: 6px 7px;
  font-size: 15px;
}

/* styling button */
#copyText {
  padding: 6px 11px;
  font-size: 15px;
  font-weight: bold;
  background-color: #121212;
  color: #efefef;
}

The Scrypting

Return the text field and the button to the variables text and btn respectively.

On button click, call a function that performs the following two tasks.

  1. Select the content of the text field by writing text.select(). The select()method is used to select the contents of an element that includes text field (like input or textarea).
  2. Copy the content of the text field by writing document.execCommand("copy"). The execCommand() method is used to execute a command for the selected part of an editable region. In our case, it is executing the copy command.

JS

/* return content of input field to variable text */
var text = document.getElementById("inputText");

/* return button to variable btn */
var btn = document.getElementById("copyText");

/* call function on button click */
btn.onclick = function() {
  text.select();    
  document.execCommand("copy");
}

Summing Up

This is the full code.

  • HTML
  • CSS
  • JS
<!-- text input field -->
<input id="inputText" type="text" value="A miss is as good as a mile">

<!-- button -->
<button id="copyText">Copy</button>
						
/* styling text input field */
#inputText {
  padding: 6px 7px;
  font-size: 15px;
}

/* styling button */
#copyText {
  padding: 6px 11px;
  font-size: 15px;
  font-weight: bold;
  background-color: #121212;
  color: #efefef;
}
						
/* return content of input field to variable text */
var text = document.getElementById("inputText");

/* return button to variable btn */
var btn = document.getElementById("copyText");

/* call function on button click */
btn.onclick = function() {
  text.select();    
  document.execCommand("copy");
}
						

Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).