Como criar o botão Copiar para a área de transferência em JavaScript

JavaScript é uma linguagem de programação da web que torna nosso site interativo, dando -lhe a capacidade de pensar e agir. Copiar para o botão de transferência é uma necessidade em muitos sites, por exemplo, se você desenvolveu um site que paráfrase suas frases ou seu site é um removedor de plágio, ou é um campo de texto simples que permite que o usuário escreva dados online. Para melhorar a experiência do usuário, sites que fornecem algumas informações e essas informações são necessárias em outras seções do site, o site exige a cópia para o botão. Então, olhando para todos esses usos, vamos implementar um programa JavaScript que responderá à pergunta de como criar o copiar para área de transferência Botão em JavaScript.

Html

HTML é uma linguagem de hipertexto de marcação que fornece estrutura ao nosso site. Usaremos o HTML para criar um campo de entrada que será usado pelo usuário para inserir algum texto. Em seguida, um botão será criado, que, quando clicado, copiará qualquer coisa que esteja no campo de entrada. No final, usaremos uma tag de script para fazer referência ao arquivo JavaScript que possui código JavaScript:

cópia de

Usamos o eu ia atributo na tag de entrada para que possamos referenciá -la mais tarde no arquivo JavaScript. Nós também inicializamos o ONCLICK evento que significa sempre que o usuário clica no cópia de botão, o handleclick () a função será executada.

JavaScript

Inicializamos uma função com o nome de handleclick () para que sempre que o usuário clique no botão de cópia, o código nesta função começará a executar. Dentro da função, usando o atributo ID do campo de entrada, referenciamos o campo de entrada e anexado .valor no final, para que o valor do campo de entrada seja armazenado na entrada variável. Agora que temos o valor do campo de entrada, vamos copiar o valor para a área de transferência usando o navegador.prancheta.Write () função onde passamos a variável de entrada como um parâmetro. O texto da variável de entrada agora é copiado para a área de transferência. No final, alertamos a variável de entrada.

função handleclick ()
/ * Salvar o valor do MyText na variável de entrada */
var input = documento.getElementById ("MyText").valor;
/ * Copie o texto dentro do campo de texto */
navegador.prancheta.writeText (entrada);
alerta ("texto copiado:" + entrada);

Entramos no texto cópia para o Artigo da área de transferência no campo de entrada e agora clicaremos no cópia de botão. Veremos um alerta mostrando o texto copiado:

Vá para uma nova janela ou um arquivo do Word e pressione Ctrl+v que vai colar o cópia para o artigo da área de transferência naquela janela.

Conclusão

Copiar para o botão de transferência é muito útil quando você está criando um site que usa informações de uma seção para outra, melhorando a experiência do usuário. O botão de cópia para a área de transferência também é um projeto para um iniciante que deseja praticar suas habilidades de JavaScript.

Nesta postagem, implementamos a cópia no botão da área de transferência em JavaScript junto com capturas de tela e um GIF.