Create a Custom Clipboard via HTML, CSS and JavaScript

Demonstration of the clipboard on my YouTube channel.

We designate the <div> as belonging to the “dropdown” class.

The <button> element belongs to the “dropbtn” class, labelled “Email Templates” for human eyes.

Then, we have a <div> of “dropdown-content”, which contains 2 types of <a> elements:

(1) Headings(ie, General Response, Billing / Sales, and Tier 2 IT Support).

(2) The <input> text fields, which are listed under their respective headings.

Each <input> element calls the document object and its method of displaying the copied texts.

<div class="dropdown">
<button class="dropbtn">Email Templates</button>
 <div class="dropdown-content">
  <a> General Response </a>
    <a> <input id="copytext1" type="text" value="It was..."></a>
   <a> Billing / Sales </a>
    <a> <input id="copytext2" type="text" value="This is..."> </a>
   <a> Tier 2 IT Support </a>
    <a> <input id="copytext3" type="text" value="A ticket..."></a>
  </div>
</div>

The copying of text is accomplished thanks to the onclick event.

Each line of text field you click on executes the execCommand() method, which provides the copy command.

document.getElementById("copytext1").onclick = function() {
   this.select();
   document.execCommand('copy');
  }

In the CSS file, we refer to the table, th, td elements, which references dropdown and its input options, and adjust the color and pixels of the border.

Also, we tag the dropdown buttons and its options, and specify the font, colors, positioning, size, etc.

Hopefully you found this useful and fun. For the source code, you may find it here at my github repo.