HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development Javascript

How To Copy Text to Clipboard [CODE]

in Javascript
Reading Time: 3 mins read
375 28
0
554
SHARES
2.5k
VIEWS
Share on FacebookShare on Twitter

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.

RelatedPosts

How To Prevent or Disable Copy and Paste in an Input Field

How To Get the Size of the Screen, Current Web Page and Browser Window

Vertical Slick Slider with Progress Bar [CODE]

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";
}

 

 

Share222Tweet139Share55

Related Posts

How To Prevent or Disable Copy and Paste in an Input Field
Javascript

How To Prevent or Disable Copy and Paste in an Input Field

by 22bulbjungle
December 21, 2022
0

On the following html code, you will see there are 2 input fields. One with a type of email and the other...

Read more

How To Get the Size of the Screen, Current Web Page and Browser Window

December 11, 2022
Vertical Slick Slider Progress Bar Indicator

Vertical Slick Slider with Progress Bar [CODE]

September 1, 2022
Slick Image with Text Slider

How To Create Custom Image Text Slider Using Slick (Step-by-step)

April 27, 2021
Electronics, Smartphone, Computer & Tablet Repair Kit
How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
How To Prevent or Disable Copy and Paste in an Input Field

How To Prevent or Disable Copy and Paste in an Input Field

December 21, 2022
How To Turn Image Into Vintage With CSS

How To Turn Image Into Vintage With CSS

December 21, 2022

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Affiliate Disclosure: 22bulbjungle is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

Recent Tutorials

How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022

Categories

  • CSS
  • Duda Builder
  • Ecommerce
  • Elementor
  • Graphic Design
  • htaccess
  • Javascript
  • jQuery
  • PC Tips
  • Photoshop
  • PHP
  • Responsive design
  • Shopify
  • Video
  • Web Design
  • Web Development
  • Webdev Tips
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2022 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2022 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.