How To Copy Text to Clipboard
By Categories: Javascript2.9 min read

In this tutorial, I will show you how to create a function to copy text to clipboard.

For this example, the text content is inside the textarea.

Let’s create a button to trigger. Add an “onclick” attribute with the value of the function we are going to create later.

Next, add the text element that will indicate the text has been copied.

Add some styling.

Hide the indicator element. We will make it appear once the text is copied.

Now, let’s create the function.

Create a variable content for the textarea text content.
Also add “indicatortext for the text indicator.

Add the variable content with the select method to select all the text inside the textarea.

For the mobile devices, let’s use the set Selection Range method to set the start and end positions of the current text selection in our textarea.

Now let’s copy this text selection.

And finally show the indicator text.

The HTMLInputElement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field.

The HTMLInputElement.setSelectionRange() method sets the start and end positions of the current text selection in an <input> or <textarea> element.

Optionally, in newer browser versions, you can specify the direction in which selection should be considered to have occurred. This lets you indicate, for example, that the selection was set by the user clicking and dragging from the end of the selected text toward the beginning.

This method updates the HTMLInputElement.selectionStart, selectionEnd, and selectionDirection properties in one call.

The Clipboard interface’s writeText() property writes the specified text string to the system clipboard. Text may be read back using either read() or readText().

The “clipboard-write” permission of the Permissions API, is granted automatically to pages when they are in the active tab.

JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. Read more about JavaScript. – developer.mozilla.org

<textarea id="content" name="content" rows="20" cols="50">
For a long time I used to go to bed early. Sometimes, when I had put out my candle, my eyes would close so quickly that I had not even time to say “I’m going to sleep.” And half an hour later the thought that it was time to go to sleep would awaken me; I would try to put away the book which, I imagined, was still in my hands, and to blow out the light; I had been thinking all the time, while I was asleep, of what I had just been reading, but my thoughts had run into a channel of their own, until I myself seemed actually to have become the subject of my book: a church, a quartet, the rivalry between François I and Charles V. - From: In Search of Lost Time
</textarea> 

<div class="button-holder">
    <button onclick="copy_func()">Copy text</button>
    <span id="indicator">Copied!</span>
</div>

 

function copy_func(){
    var content = document.getElementById("content"),
    indicatortext = document.getElementById("indicator");

    content.select();
    content.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(content.value);

    indicatortext.style.display = "block";
}

 

 

Leave A Comment