Let's Build a Copy to ClipBoard Together.

Hello 👋, my gorgeous friend on the internet, today we will be building a copy to clipBoard together using HTML, CSS (optional), and JavaScript💃.

You can check out the demo below 👇 before we continue

See the Pen copy and paste by Ayodele S. Adebayo (@unclebay143) on CodePen. This article is an extraction from my previous article on Building Social Media Share Button with pure Html where we make use of the copy clipboard feature to share content to LinkedIn and Facebook as displayed above 👆.

A temporary storage area where material cut or copied from a place in our computer is kept for pasting into another place.

So what are we waiting for 🤷‍♂️. Let's get started

We are going to divide this article into three (3) sections

1. Html section

2. JavaScript Section, and

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

3. Css Section (Optional)

1. HTML Section

This section is where we structure the HTML layout of the text we want to copy to the clipboard and how we want the text to be copied, below are what makes up the layout 👇.

i. The text container,

ii. The text we want to copy to clipboard, and

iii. The Button that will copy the text when clicked.

i. The text container

This can be a text a <p> tag, an <input> tag, a <textarea> tag, or any other HTML tag that can contain a text.

For this article, we are going to be making use of the <textarea> tag for no special reasons.

<span class="hljs-comment"><!-- Text container with an identifer--></span>  
<span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"shareCaption"</span>></span><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>

Ensure to give your text container an identifier like an id or a class name as shown above as this will be used later in our JavaScript section.

iii. The text we want to copy to the clipboard

The text you want the users to be able to copy to the clipboard should be available in this stage and it will go directly into the text container we have created above.

<span class="hljs-comment"><!-- Text container with an identifer--></span>  
<span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"shareCaption"</span>></span>  
<span class="hljs-comment"><!-- Text to copy to clipboard--></span>  
I just read one of unclebigbay's articles on @hashnode.  
You can read more by clicking the link below 👇.  
<span class="hljs-tag"></<span class="hljs-name">textarea</span>></span>

The text should go into the value=" ..." attribute if you're making use of the input tag.

iii. The Button that will copy the text when clicked.

If we don't want the user to use the ctrl + c on their keyboard, then we need to provide them with a visual, which they can click on to get the content copied.

In this article, we will be making use of the button for no special reason as well.

<span class="hljs-comment"><!-- The button used to copy the caption --></span>  
<span class="hljs-tag"><<span class="hljs-name">button</span>></span>Copy Caption<span class="hljs-tag"></<span class="hljs-name">button</span>></span>

We will be binding a JavaScript function to this button later on.

At this stage, we have completed 99% of our HTML layout, let's proceed to the main brain that will make things lively.

3. The JavaScript Section

This section is where we will add functionalities to every of the HTML elements we have created above.

To get this done, we need to create a function that will wrap all our commands.

<span class="hljs-comment">/* Function that handles the text copy*/</span>  
<span class="hljs-keyword">const</span> copyCaption = () =>{

  <span class="hljs-comment">/* Get the text field through the text container identifier*/</span>  
  <span class="hljs-keyword">var</span> copyText = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"shareCaption"</span>);

  <span class="hljs-comment">/* Select the text container */</span>  
  copyText.select();

<span class="hljs-comment">/* Mobile device support */</span>  
  copyText.setSelectionRange(<span class="hljs-number">0</span>, <span class="hljs-number">99999</span>); 


  <span class="hljs-comment">/* Copy the text inside the text field MAIN COMMAND COPYING THE TEXT */</span>  
   <span class="hljs-built_in">document</span>.execCommand(<span class="hljs-string">"copy"</span>);

  <span class="hljs-comment">/* Notify the user that the text has been copied */</span>  
  <span class="hljs-built_in">document</span>.<span class="hljs-built_in">querySelector</span>(<span class="hljs-string">".copy__btn"</span>).innerText = <span class="hljs-string">"Text Copied!"</span>

}

Now, update your HTML button

<span class="hljs-comment"><!-- The button used to copy the caption --></span>  
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"copy__btn"</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">"copyCaption()"</span>></span>Copy Caption<span class="hljs-tag"></<span class="hljs-name">button</span>></span>

You should be able to copy text to the clipboard through the copy caption button.

See the Pen copy and paste by Ayodele S. Adebayo (@unclebay143) on CodePen. Click the Copy caption button and paste anywhere

Explanation

1. var copyText = document.getElementById("shareCaption");

Here we retrieved the text container from the HTML layout and store it inside a container named copyText for later use.

2. copyText.select(); (Optional)*

This gives the blue overlay on the text whenever we click on the button, this is equivalent to pressing ctrl + a on your keyboard😉.

The code below 👇 is included for mobile device support

copyText.setSelectionRange(0, 99999);

3. document.execCommand("copy"); (Compulsory)*

This is the main line of code that does the copy of the text, without it, the text will just be highlighted without been copied.

4. document.querySelector(".copy__btn").innerText = "Text Copied!" (Optional)

This is just to tell the user that the text has been copied successfully and ready for paste, you can do without this, but don't you think it is cool 😉.

To this point, we have achieved our goal for this article, now we can proceed to the final optional section😊.

3. CSS Section.

This section is where you style your HTML layout to suit your preference.

Below is the full HTML, JavaScript, CSS styling for this article.

See the Pen copy and paste by Ayodele S. Adebayo (@unclebay143) on CodePen. You can proceed to style your own HTML layout.

Final Thoughts

I hope you enjoyed building the copy to clipboard feature and also hope it will be useful someday in your project, if you found this helpful, I would like to connect on Twitter and if you would like to support my blog by contributing to buy it a custom domain name, feel free to click on the button below 👇.

Thanks and see you in the next article 🙋‍♂️🙋‍♂️🙋‍♂️.