Create a Click on-to-Copy Utility With JavaScript

This tutorial is a brief information on making a click-to-copy utility utilizing easy JavaScript, HTML, and CSS.

The clicking-to-copy utility has turn into a preferred sample within the programming world over time. I’ve typically seen it utilized by builders to rapidly copy API keys, code snippets, numbers, and extra.

The onset of this sample within the extra technical area has impressed many fashionable internet web sites to implement the identical design inside their merchandise to extend their customers’ general expertise.

What We Are Constructing

The clicking-to-copy utility can take many shapes, however we’ll use a easy textual content subject and button for this tutorial. As soon as entered, the worth of the textual content subject could be copied to your clipboard by clicking the Click on-to-Copy button.

1. Begin With the HTML Markup

The HTML elements of a click-to-copy utility require some type of person enter aspect. So as phrases, a textual content enter or textual content space a person can enter the textual content inside.

As I discussed, you possibly can optionally have a component with preset textual content already current, like code snippets.

This tutorial will deal with the person enter aspect of that coin.

1

<h1 class="heading">Click on-to-copy JavaScript Element</h1>

2

<div class="copy-box">

3

  <enter kind="textual content" placeholder="Change me" />

4

  <button>Click on-to-Copy</button>

5

</div>

We begin with simple HTML consisting of a textual content enter and a button. A div with a .copy-box class title wraps the controls so we are able to goal it and its contents with CSS.

2. Styling the Utility With CSS

We will rework the utility right into a extra usable and better-looking UI with some easy CSS.

You’ll discover a .alert class within the CSS. This aspect is for a element we’ll add dynamically with JavaScript.

When a person enters textual content contained in the enter and clicks the Click on-to-Copy button, the alert will show on the decrease finish of the browser viewport and shift to the center of the display. We use the calc() CSS property to leverage math to assist decide the correct offset.

1

.heading {

2

  font-size: 14px;

3

  text-align: middle;

4

  padding-top: 1rem;

5

  padding-bottom: 1rem;

6

  border-bottom: 1px stable #ddd;

7

  line-height: 1.5;

8

  background: #f8fafc;

9

  margin: 0;

10

}

11

12

.copy-box {

13

  background: #f9fafb;

14

  padding: 10px;

15

  border-radius: 6px;

16

  border: 1px stable #cbd5e1;

17

  width: 400px;

18

  margin: 60px auto;

19

  show: flex;

20

  justify-content: space-between;

21

  hole: 1rem;

22

  place: relative;

23

}

24

25

.copy-box enter {

26

  coloration: #475569;

27

  border: 1px stable #e5e7eb;

28

  border-radius: 6px;

29

  padding: 10px 12px;

30

  font-size: 16px;

31

  flex-grow: inherit;

32

  flex: 1;

33

}

34

35

.copy-box button {

36

  border-radius: 6px;

37

  look: none;

38

  background-color: #1d4ed8;

39

  coloration: white;

40

  border: none;

41

  padding: 10px 12px;

42

  cursor: pointer;

43

}

44

45

.alert {

46

  place: fastened;

47

  backside: 10px;

48

  proper: calc(50% - (66px / 2)); /* width of half of alert aspect */

49

  background: black;

50

  coloration: white;

51

  padding: 4px 9px;

52

  border-radius: 6px;

53

  z-index: 10;

54

  font-size: 14px;

55

}

3. Invoking the Click on-to-Copy Performance With JavaScript

Okay, quantity three of our holy trinity.

The Constructor Sample

To set the code as much as be reusable, I favor writing JavaScript lessons that make use of a constructor sample. So we are able to create a brand new occasion every time we’d like it and use the identical performance on completely different click-to-copy utilities that is perhaps required on a given web site or internet web page.

This tutorial assumes you’ve gotten one on the web page, however it may prolong to account for a number of utilities ought to you could scale it.

I’ll begin by making a customized JavaScript class referred to as ClickToCopy.

Understanding we now have the button aspect and the enter aspect to focus on, I’ll create a constructor perform that provides us fast entry to every which may get handed throughout initialization.

We will then arrange a brand new occasion following the category for this tutorial.

1

class ClickToCopy {

2

  constructor(goal, content material) {

3

    this.goal = goal

4

    this.content material = content material

5

  }

6

}

7

8

const goal = doc.querySelector("button")

9

const content material = doc.querySelector("enter")

10

const copyHelper = new ClickToCopy(goal, content material)

11

copyHelper.initialize()

We have to cross the 2 situations we reference contained in the constructor() perform to make use of the category.

Utilizing the new key phrase, we create a brand new occasion of the ClickToCopy and assign it to a variable I made referred to as copyHelper.

Lastly, we are able to name a perform I named initialize() that we’ll add to the category physique subsequent.

1

class ClickToCopy {

2

  constructor(goal, content material) {

3

    this.goal = goal

4

    this.content material = content material

5

  }

6

7

  initialize() {

8

    this.listenForClick()

9

  }

10

11

  listenForClick() {

12

    let self = this

13

    this.goal.addEventListener("click on", (e) => {

14

      e.preventDefault()

15

      self.copy(self.content material.worth)

16

    })

17

  }

18

19

  copy(textual content) {

20

    const enter = doc.createElement("enter")

21

    enter.setAttribute("worth", textual content)

22

    doc.physique.appendChild(enter)

23

    enter.choose()

24

    let copiedResult = doc.execCommand("copy")

25

    doc.physique.removeChild(enter)

26

27

    const alert = doc.createElement("div")

28

    alert.classList.add("alert")

29

    alert.textContent = "Copied!"

30

    // Customise the place you would possibly need to show the alert right here

31

    // I selected the broader physique aspect for demonstration functions

32

    doc.physique.appendChild(alert)

33

34

    setTimeout(() => {

35

      doc.querySelector(".alert").fashion.show = "none"

36

      doc.physique.removeChild(alert)

37

    }, 1000)

38

39

    // Optionally reset enter contents

40

    this.content material.worth = ""

41

42

    // Return the outcome that will get copied to the clipboard

43

    return copiedResult

44

  }

45

}

Our 3 ClickToCopy Features

Contained in the ClickToCopy class, I’ve added three whole capabilities.

• initialize() – a perform I like to make use of to name the majority of the logic from a given class.
• listenForClick() – a perform answerable for listening for the button click on in our utility and in addition calling a perform referred to as copy().
• copy() – a perform that does the precise logic of the utility.

The copy() perform creates a brand new textual content enter from scratch as a result of we have to mimic the choice of textual content and copying of textual content dynamically. Often, it is a guide follow, however fortunately with JavaScript, you possibly can automate it with some work.

The enter will get stuffed with the content material supplied within the textual content enter. The textual content is then chosen utilizing the JavaScript choose() methodology. Lastly, that textual content is copied to the person’s clipboard dynamically, and the brand new textual content enter that will get generated is faraway from the web page.

When that logic is full, we add a brand new alert aspect to the view to assist the person know the textual content has certainly been copied to their clipboard. This will get eliminated after about one second utilizing the setTimeout() perform constructed into JavaScript.

You possibly can optionally reset the enter contents in case your design requires it, and I selected to take action for this tutorial.

Conclusion

Hopefully, this easy but highly effective addition will please your finish customers by lowering the variety of mouse clicks or key instructions they should be extra productive in your web site. 

Let’s remind ourselves what we constructed: