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

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

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.

<!-- Text container with an identifer-->
<textarea id="shareCaption"></textarea>

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.

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

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.

<!-- The button used to copy the caption -->
<button>Copy Caption</button>

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.

/* Function that handles the text copy*/
const copyCaption = () =>{

  /* Get the text field through the text container identifier*/
  var copyText = document.getElementById("shareCaption");

  /* Select the text container */
  copyText.select();

/* Mobile device support */
  copyText.setSelectionRange(0, 99999); 


  /* Copy the text inside the text field MAIN COMMAND COPYING THE TEXT */
   document.execCommand("copy");

  /* Notify the user that the text has been copied */
  document.querySelector(".copy__btn").innerText = "Text Copied!"

}

Now, update your HTML button

<!-- The button used to copy the caption -->
<button class="copy__btn" onClick="copyCaption()">Copy Caption</button>

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

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)*

Copied text with blue overlay

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.

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 🙋‍♂️🙋‍♂️🙋‍♂️.

Unclebigbay's 🚀 Blog