Copiar textos

Academia de Joystick

by Roberto Orozco

HTML

<!-- Nuestro input que contendrá el texto a copiar -->
<input type="text" id="input" value="¡Hola vaquero!">

<!-- Nuestro botón que ejecutará la función de javascript -->
<button id="button">Copiar</button>

<!-- Mostraremos aquí notificaciones o el texto copiado -->
<div id="wrapper" class="hidden"></div>

SASS

#wrapper
  padding: 10px
  margin-top: 10px
  border-radius: 5px
  color: white

.success
  background: #2ecc71

.danger
  background: #e74c3c
  
.hidden
  display: none
  
.display
  display: block

JavaScript

function copiar_texto() {
  // Seleccionar el input de texto y el wrapper
  var input = document.getElementById("input"),
    wrapper = document.getElementById('wrapper');

  // Limpiar cualquiera que sea el valor anterior del wrapper
  wrapper.innerHTML = '';
  wrapper.classList = 'hidden';

  if (input.value.length < 1) {
    wrapper.innerHTML = 'Ingresa un valor válido para copiar.';
    wrapper.classList = 'danger display';
    return;
  }

  // Seleccionamos el input sin necesidad de hacer contacto
  input.select();
  input.setSelectionRange(0, 99999);

  // Usamos el navigator para acceder al clipboard y escribir el valor del input en él
  navigator.clipboard.writeText(input.value);

  // Informamos que hemos copiado el texto
  wrapper.innerHTML = '<b>Texto copiado:</b> ' + input.value;
  wrapper.classList = 'display success';
}

document.getElementById("button").addEventListener("click", copiar_texto);