CRIE UM BOTÃO AUTOMÁTICO QUE SELECIONA E COPIA TEXTO. COM HTML, CSS E JAVASCRIPT CÓDIGO FONT:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>boato copiar</title>
<style>
body{
background-color: #00d9ff;
}
input{
width: 220px;
height: 35px;
text-align: center;
}
button{
padding: 12px 13px;
background-color: #0000ff;
color: white;
font-weight: bold;
border: 1px solid #00d9ff;
border-radius: 5px;
cursor: pointer;
}
button:hover{
background-color: #4040fa;
}
textarea{
text-align: center;
}
div.resultado{
font: bold 12pt arial;
}
</style>
</head>
<body>
<center style="margin-top:10%">
<input type="text" id="linkoriginal" placeholder="texto para copiar"> <button id="acao">Copiar</button>
<br><br>
<textarea name="" id="" cols="40" rows="10" placeholder="Cole aqui o texto copiado, para testar se foi copiado"></textarea>
<div class="resultado"></div>
</center>
<script>
let btn=document.querySelector('#acao')
let ipt=document.querySelector('#linkoriginal')
let res=document.querySelector('.resultado')
btn.onclick=()=>{
if(ipt.value.length==0){
res.innerHTML="A CAIXA DE TEXTO ESTÁ VAZIA"
}
else{
ipt.select()/******* SELCIONANDO O TEXO */
document.execCommand('copy')/******* COPIANDO O TEXO */
res.innerHTML=('TEXTO COPIADO COM SUCESSO ')
}
}
</script>
</body>
</html>
0 Comentários