it-swarm.com.de

JavaScript-Kopie in die Zwischenablage funktioniert nicht

Ich habe eine Funktion in meinem Skript, die mir einen Fehler gibt. Die Funktion dient dazu, Text aus dem statischen Bedienfeld (kein Textfeld oder Eingabe) mit dem Ereignis onClick zu kopieren.

Uncught TypeError: copyText.select ist keine Funktion

Ich möchte, dass der Benutzer in der Lage ist, auf den Text zu klicken, und er wird in seine Zwischenablage kopiert.

Vielleicht können Sie eine bessere Funktion anbieten, die funktioniert?

https://codepen.io/abooo/pen/jYMMMN?editors=1010

function myFunction() {
  var copyText = document.getElementById("display");
  copyText.select();
  document.execCommand("Copy");
  alert("Copied the text: " + copyText.value);
}

Von w3schools

8
user7570296

Auf diese Weise können Sie den Text eines Elements kopieren. Allerdings habe ich es nicht mit kompliziertem Layout getestet.

Wenn Sie dies verwenden möchten, entfernen Sie die Warnmeldungen und geben Sie dem Benutzer eine bessere Möglichkeit, um zu erfahren, dass der Inhalt kopiert wurde.

SAFARI: Dies funktioniert nicht auf Safari vor Version 10.0. Aber ab Safari 10. funktioniert das jetzt.

function copyText(element) {
  var range, selection, worked;

  if (document.body.createTextRange) {
    range = document.body.createTextRange();
    range.moveToElementText(element);
    range.select();
  } else if (window.getSelection) {
    selection = window.getSelection();        
    range = document.createRange();
    range.selectNodeContents(element);
    selection.removeAllRanges();
    selection.addRange(range);
  }
  
  try {
    document.execCommand('copy');
    alert('text copied');
  }
  catch (err) {
    alert('unable to copy text');
  }
}
<h1 id='display' onClick='copyText(this)'>Text Sample</h1>

Wenn Sie dies für ein <input> - oder <textarea> - Element verwenden möchten, teilen Sie mir mit, dass der Code unterschiedlich ist.

Der Versuch/Fang ist für ältere Versionen von Safari, die eine Ausnahme auslösen würden. Wenn Sie Safari nicht vor Version 10.0 unterstützen möchten, können Sie es entfernen.

10
Intervalia

Tolle Antwort von Intervalia. 

Kleine Verbesserung, manchmal ist das angeklickte Element nicht das Element, das Sie kopieren möchten.
.__ Ich schlage vor, Sie übergeben die ID des Elements, das Sie kopieren möchten. 

<button onClick='copyText("display")'> Copy </button>
<h1 id='display'> Text Sample </h1>

Und dann in der ersten Zeile Ihrer Funktion 

element = document.getElementById(element); 

Kein großer Unterschied, aber ich denke, es ist auf diese Weise nützlicher.

1
Hike Nalbandyan

Die select()-Methode wird verwendet, um den Inhalt von Textfeldern auszuwählen. es funktioniert nicht für h1 element.

0
mac

hallo, also habe ich es mir angesehen und da Sie keinen Texteingang verwenden, können Sie nicht einfach die Funktion .select() verwenden. Ich habe mir einen Code von einem Kollegen, dem Entwickler von Stack Overflow, ausgeliehen, um zu erfahren, wie man ein Element in JavaScript hervorhebt

Auswählen von Text in einem Element, das der Hervorhebung mit der Maus ähnelt.

function selectedText(element)(){

var doc = document,
text = doc.getElementById(element)
range, selection;

if(doc.body.createTextRange){ 
 range = document.body.createTextRange();
 range.moveToElementText(text);
 range.select(); 
}
else if(window.getSelection){
  selection = window.getSelection();
  range = document.createRange();
  range.selectNodeContents(text);
  selection.removeAllRanges();
  selection.addRange(range);   
}

return range;

Ich habe es dann geändert, um den Bereich zurückzugeben. und damit müssten Sie nur noch tun

document.onclick = function(e){
  if(e.target.className === 'click'){

      var copytext = SelectText('display');
      document.execCommand("copy");
      alert("Copied the text: " + copytext);
   }
}

das wichtigste dabei ist, dass die Zeichenfolge an .execCommand() is lower case 'copy' übergeben wurde.

0
Andres C.