Crie um utilitário Click-to-Copy com JavaScript

Este tutorial é um guia curto sobre como criar um utilitário de clique para copiar usando JavaScript, HTML e CSS simples.

O utilitário clique para copiar tornou-se um padrão popular no mundo da programação ao longo dos anos. Muitas vezes, vi isso sendo usado por desenvolvedores para copiar rapidamente chaves de API, trechos de código, números e muito mais.

O início desse padrão no espaço mais técnico inspirou muitos sites modernos a implementar o mesmo design em seus produtos para aumentar a experiência geral de seus usuários.

O que estamos construindo

O utilitário de clique para copiar pode assumir várias formas, mas usaremos um campo de texto simples e um botão para este tutorial. Depois de inserido, o valor do campo de texto pode ser copiado para a área de transferência clicando no botão Clique para copiar botão.

1. Comece com a marcação HTML

Os componentes HTML de um utilitário de clique para copiar requerem alguma forma de elemento de entrada do usuário. Em outras palavras, uma entrada de texto ou área de texto em que o usuário pode inserir o texto.

Como mencionei, opcionalmente, você pode ter um elemento com texto predefinido já presente, como trechos de código.

Este tutorial se concentrará no lado da entrada do usuário dessa moeda.

1

 class="heading">Click-to-copy JavaScript Component

2

 class="copy-box">

3

   type="text" placeholder="Change me" />

4

  Click-to-Copy

5

Começamos com um HTML direto que consiste em uma entrada de texto e um botão. Uma div com um .copy-box O nome da classe envolve os controles para que possamos direcioná-lo e seu conteúdo com CSS.

2. Estilizando o utilitário com CSS

Podemos transformar o utilitário em uma interface do usuário mais utilizável e de melhor aparência com um pouco de CSS simples.

Você notará um .alert classe no CSS. Este elemento é para um componente que adicionaremos dinamicamente com JavaScript.

Quando um usuário insere texto dentro da entrada e clica no botão Clique para copiar botão, o alerta será exibido na extremidade inferior da janela de visualização do navegador e mudará para o meio da tela. Nós usamos o calc() Propriedade CSS para aproveitar a matemática para ajudar a determinar o deslocamento adequado.

1

.heading {

2

  font-size: 14px;

3

  text-align: center;

4

  padding-top: 1rem;

5

  padding-bottom: 1rem;

6

  border-bottom: 1px solid #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 solid #cbd5e1;

17

  width: 400px;

18

  margin: 60px auto;

19

  display: flex;

20

  justify-content: space-between;

21

  gap: 1rem;

22

  position: relative;

23

}

24

25

.copy-box input {

26

  color: #475569;

27

  border: 1px solid #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

  appearance: none;

38

  background-color: #1d4ed8;

39

  color: white;

40

  border: none;

41

  padding: 10px 12px;

42

  cursor: pointer;

43

}

44

45

.alert {

46

  position: fixed;

47

  bottom: 10px;

48

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

49

  background: black;

50

  color: white;

51

  padding: 4px 9px;

52

  border-radius: 6px;

53

  z-index: 10;

54

  font-size: 14px;

55

}

3. Chamando a funcionalidade Click-to-Copy com JavaScript

Ok, número três da nossa santíssima trindade.

O Padrão Construtor

Para configurar o código para ser reutilizável, prefiro escrever classes JavaScript que façam uso de um padrão de construtor. Assim, podemos criar uma nova instância sempre que precisarmos e usar a mesma funcionalidade em diferentes utilitários de clique para copiar que podem ser necessários em um determinado site ou página da web.

Este tutorial pressupõe que você tenha um na página, mas pode se estender para considerar vários utilitários, caso precise dimensioná-lo.

Começarei criando uma classe JavaScript personalizada chamada ClickToCopy.

Sabendo que temos o elemento de botão e o elemento de entrada para o destino, criarei uma função construtora que nos dará acesso imediato a cada um que possa ser passado durante a inicialização.

Podemos então configurar uma nova instância seguindo a classe deste tutorial.

1

class ClickToCopy {

2

  constructor(target, content) {

3

    this.target = target

4

    this.content = content

5

  }

6

}

7

8

const target = document.querySelector("button")

9

const content = document.querySelector("input")

10

const copyHelper = new ClickToCopy(target, content)

11

copyHelper.initialize()

Precisamos passar as duas instâncias que referenciamos dentro do constructor() função para usar a classe.

Usando o new palavra-chave, criamos uma nova instância da ClickToCopy e atribuí-lo a uma variável que fiz chamada copyHelper.

Finalmente, podemos chamar uma função que chamei initialize() que adicionaremos ao corpo da classe a seguir.

1

class ClickToCopy {

2

  constructor(target, content) {

3

    this.target = target

4

    this.content = content

5

  }

6

7

  initialize() {

8

    this.listenForClick()

9

  }

10

11

  listenForClick() {

12

    let self = this

13

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

14

      e.preventDefault()

15

      self.copy(self.content.value)

16

    })

17

  }

18

19

  copy(text) {

20

    const input = document.createElement("input")

21

    input.setAttribute("value", text)

22

    document.body.appendChild(input)

23

    input.select()

24

    let copiedResult = document.execCommand("copy")

25

    document.body.removeChild(input)

26

27

    const alert = document.createElement("div")

28

    alert.classList.add("alert")

29

    alert.textContent = "Copied!"

30

    // Customize where you might want to display the alert here

31

    // I chose the broader body element for demonstration purposes

32

    document.body.appendChild(alert)

33

34

    setTimeout(() => {

35

      document.querySelector(".alert").style.display = "none"

36

      document.body.removeChild(alert)

37

    }, 1000)

38

39

    // Optionally reset input contents

40

    this.content.value = ""

41

42

    // Return the result that gets copied to the clipboard

43

    return copiedResult

44

  }

45

}

Nossas 3 funções ClickToCopy

Dentro de ClickToCopy classe, adicionei três funções totais.

• initialize() – uma função que gosto de usar para chamar a maior parte da lógica de uma determinada classe.
• listenForClick() – uma função responsável por ouvir o clique do botão em nosso utilitário e também chamar uma função chamada copy().
• copy() – uma função que faz a lógica real do utilitário.

o copy() A função cria uma nova entrada de texto do zero porque precisamos imitar a seleção de texto e a cópia de texto dinamicamente. Normalmente, esta é uma prática manual, mas felizmente com JavaScript, você pode automatizá-la com algum trabalho.

A entrada é preenchida com o conteúdo fornecido na entrada de texto. O texto é então selecionado usando o JavaScript select() método. Por fim, esse texto é copiado dinamicamente para a área de transferência do usuário e a nova entrada de texto gerada é removida da página.

Quando essa lógica é concluída, adicionamos um novo elemento de alerta à exibição para ajudar o usuário a saber que o texto foi realmente copiado para a área de transferência. Isso é removido após cerca de um segundo usando o setTimeout() função construída em JavaScript.

Opcionalmente, você pode redefinir o conteúdo de entrada se o seu design exigir, e optei por fazer isso para este tutorial.

Conclusão

Esperançosamente, esta adição simples, mas poderosa, agradará seus usuários finais, reduzindo o número de cliques do mouse ou comandos de tecla necessários para serem mais produtivos em seu site.

Vamos nos lembrar do que construímos: