Alguma ideia de como fazer o botao copiar funcionar?
const btnCopiar = document.querySelector(".btn-copiar");
btnCopiar.addEventListener("click", copiar = () => {
Alguma ideia de como fazer o botao copiar funcionar?
const btnCopiar = document.querySelector(".btn-copiar");
btnCopiar.addEventListener("click", copiar = () => {
Olá, Ana, tudo bem?
Primeiramente, destaco que precisaremos ter códigos tanto no arquivo HTML quanto no arquivo JavaScript para fazer o botão de cópia funcionar.
No HTML necessitamos de um campo de entrada <input>
com um ID texto e um valor padrão definido. Abaixo, temos um botão com a classe btn-copiar que será usado para acionar a função de cópia.
<input type="text" id="textoParaCopiar" value="Texto a ser copiado">
<button class="btn-copiar">Copiar</button>
<script src="app.js"></script>
Já o JavaScript podemos ter algo como:
const btnCopiar = document.querySelector(".btn-copiar");
const textoParaCopiar = document.getElementById("textoParaCopiar");
btnCopiar.addEventListener("click", async () => {
try {
await navigator.clipboard.writeText(textoParaCopiar.value);
alert("Texto copiado: " + textoParaCopiar.value);
} catch (err) {
console.error('Erro ao copiar texto: ', err);
}
});
No código acima texto dentro do input é copiado para a área de transferência utilizando o Clipboard quando o botão é clicado. Se a operação for bem sucedida, um alerta é exibido. Caso contrário, um erro é logado no console.
É possível ser necessário fazer adaptações no seu código. Mas você pode se inspirar nesse código e fazer alterações necessárias.
Espero ter ajudado e bons estudos!
Nossa muito obrigada Monalisa. Entendi!!! Excelente explicação.