javascript - first - Copiar cadena de texto al hacer clic

title html javascript

Question

Pasé unos buenos 20 minutos buscando en línea para esto, pero no pude encontrarlo. Lo que quiero es poder copiar una cadena de texto al hacer clic sin un botón . La cadena de texto estará dentro de una clase "span".

1. El usuario se desplaza sobre la cadena de texto
2. El usuario hace clic en la cadena de texto
3. La cadena de texto se copia al portapapeles

Cualquier ayuda sería muy apreciada. ¡Gracias!

Answer 1

Además de copiar el texto, también debe asegurarse de que cualquier componente seleccionado previamente permanezca seleccionado después de copiarlo al portapapeles.

Aquí está el código completo:

const copyToClipboard = str => {
  const el = document.createElement(''textarea'');  // Create a <textarea> element
  el.value = str;                                 // Set its value to the string that you want copied
  el.setAttribute(''readonly'', '''');                // Make it readonly to be tamper-proof
  el.style.position = ''absolute'';                 
  el.style.left = ''-9999px'';                      // Move outside the screen to make it invisible
  document.body.appendChild(el);                  // Append the <textarea> element to the HTML document
  const selected =            
    document.getSelection().rangeCount > 0        // Check if there is any content selected previously
      ? document.getSelection().getRangeAt(0)     // Store selection if found
      : false;                                    // Mark as false to know no selection existed before
  el.select();                                    // Select the <textarea> content
  document.execCommand(''copy'');                   // Copy - only works as a result of a user action (e.g. click events)
  document.body.removeChild(el);                  // Remove the <textarea> element
  if (selected) {                                 // If a selection existed before copying
    document.getSelection().removeAllRanges();    // Unselect everything on the HTML document
    document.getSelection().addRange(selected);   // Restore the original selection
  }
};

ps agregando la source

Answer 2

HTML:

<button type=''button'' id=''btn''>Copy</button>

JS

document.querySelect(''#btn'').addEventListener(''click'', function() {
   copyToClipboard(''copy this text'');
});

JS / Función:

function copyToClipboard(text) {
    var selected = false;
    var el = document.createElement(''textarea'');
    el.value = text;
    el.setAttribute(''readonly'', '''');
    el.style.position = ''absolute'';
    el.style.left = ''-9999px'';
    document.body.appendChild(el);
    if (document.getSelection().rangeCount > 0) {
        selected = document.getSelection().getRangeAt(0)
    }
    el.select();
    document.execCommand(''copy'');
    document.body.removeChild(el);
    if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
    }
};

Answer 3

Prueba esto . document.execCommand(''copy'')

1. haga clic en el elemento y copie el texto y publique con el elemento de entrada tmp
2. Luego copie el texto de esta entrada

function copy(that){
var inp =document.createElement(''input'');
document.body.appendChild(inp)
inp.value =that.textContent
inp.select();
document.execCommand(''copy'',false);
inp.remove();
}

<p onclick="copy(this)">hello man</p>

Answer 4

Puede adjuntar un evento de copy al elemento <span> , use document.execCommand("copy") dentro del controlador de eventos, configure event.clipboardData para span .textContent con el método .setData() de event.clipboardData

const span = document.querySelector("span");

span.onclick = function() {
  document.execCommand("copy");
}

span.addEventListener("copy", function(event) {
  event.preventDefault();
  if (event.clipboardData) {
    event.clipboardData.setData("text/plain", span.textContent);
    console.log(event.clipboardData.getData("text"))
  }
});

<span>text</span>

Answer 5

function copy(that){
var inp =document.createElement(''input'');
document.body.appendChild(inp)
inp.value =that.textContent
inp.select();
document.execCommand(''copy'',false);
inp.remove();
}

<p onclick="copy(this)">hello man</p>

Answer 6

Este es el bolígrafo de código .

<link href=''https://fonts.googleapis.com/css?family=Oswald'' rel=''stylesheet'' type=''text/css''> 

<p style="color:wheat;font-size:55px;text-align:center;">How to copy a TEXT to Clipboard on a Button-Click</p>

<center>
<p id="p1">This is  TEXT 1</p>
<p id="p2">This is TEXT 2</p><br/>

<button onclick="copyToClipboard(''#p1'')">Copy TEXT 1</button>
<button onclick="copyToClipboard(''#p2'')">Copy TEXT 2</button>

<br/><br/><input class="textBox" type="text" id="" placeholder="Dont belive me?..TEST it here..;)" />
</center>

Código Jquery aquí

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}