wake-up-neo.com

Javascript - Textstring bei Klick kopieren

Ich habe gut 20 Minuten damit verbracht, online danach zu suchen, konnte es aber nicht finden. Was ich möchte, ist, eine Textzeichenfolge mit Klick ohne eine Schaltfläche kopieren zu können. Die Textzeichenfolge befindet sich innerhalb einer "span" -Klasse.

  1. Der Benutzer schwebt über einer Zeichenfolge
  2. Der Benutzer klickt auf die Zeichenfolge
  3. Textzeichenfolge wird in die Zwischenablage kopiert

Jede Hilfe wäre sehr dankbar. Vielen Dank!

javascriptclipboardcopy-paste
17
Matthew

Sie können das copy -Ereignis an das <span>-Element anfügen, document.execCommand("copy") innerhalb des Event-Handlers verwenden und event.clipboardData auf span.textContent mit der .setData()-Methode von event.clipboardData setzen. 

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>

26
guest271314

Versuchen Sie dies . document.execCommand('copy')

  1. klicke auf das Element und kopiere den Text und poste mit dem tmp-Eingabeelement
  2. Kopieren Sie dann den Text von dieser Eingabe
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>
21
prasanth

Dies ist der Code pen .

<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>

Jquery-Code hier

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

HTML: 

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

JS

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

JS/Funktion:

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);
    }
};
1
Ricardo Canelas

Neben dem Kopieren des Texts müssen Sie auch sicherstellen, dass alle zuvor ausgewählten Komponenten nach dem Kopieren in die Zwischenablage ausgewählt bleiben. 

Hier ist der vollständige Code:

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
  }
};
1
Natesh bhat