web-dev-qa-db-de.com

Kopieren Sie die Ausgabe einer JavaScript-Variablen in die Zwischenablage

Ich habe keine Kenntnis von JavaScript, aber es ist mir gelungen, diesen Code mithilfe von Bits und Bolzen aus verschiedenen Stack Overflow-Antworten zusammenzusetzen. Es funktioniert in Ordnung und gibt ein Array aller ausgewählten Kontrollkästchen in einem Dokument über ein Warnfeld aus.

function getSelectedCheckboxes(chkboxName) {
  var checkbx = [];
  var chkboxes = document.getElementsByName(chkboxName);
  var nr_chkboxes = chkboxes.length;
  for(var i=0; i<nr_chkboxes; i++) {
    if(chkboxes[i].type == 'checkbox' && chkboxes[i].checked == true) checkbx.Push(chkboxes[i].value);
  }
  return checkbx;
}

Und um es zu nennen verwende ich:

<button id="btn_test" type="button" >Check</button>
<script>
    document.getElementById('btn_test').onclick = function() {
        var checkedBoxes = getSelectedCheckboxes("my_id");
        alert(checkedBoxes);
    }
</script>

Jetzt möchte ich es ändern. Wenn Sie auf die Schaltfläche btn_test klicken, wird das Ausgangsarray checkbx in die Zwischenablage kopiert. Ich habe versucht, Folgendes hinzuzufügen:

checkbx = document.execCommand("copy");

oder

checkbx.execCommand("copy");

am Ende der Funktion und dann Aufruf wie folgt:

<button id="btn_test" type="button" onclick="getSelectedCheckboxes('my_id')">Check</button>

Aber es funktioniert nicht. Es werden keine Daten in die Zwischenablage kopiert.

29
harman

OK, ich fand etwas Zeit und folgte dem Vorschlag von Teemu und konnte genau das bekommen, was ich wollte.

Hier ist also der endgültige Code für alle, die daran interessiert sind. Zur Verdeutlichung erhält dieser Code alle markierten Kontrollkästchen einer bestimmten ID, gibt sie in einem Array mit dem Namen checkbx aus und kopiert dann ihren eindeutigen Namen in die Zwischenablage.

JavaScript-Funktion:

function getSelectedCheckboxes(chkboxName) {
  var checkbx = [];
  var chkboxes = document.getElementsByName(chkboxName);
  var nr_chkboxes = chkboxes.length;
  for(var i=0; i<nr_chkboxes; i++) {
    if(chkboxes[i].type == 'checkbox' && chkboxes[i].checked == true) checkbx.Push(chkboxes[i].value);
  }
  checkbx.toString();

  // Create a dummy input to copy the string array inside it
  var dummy = document.createElement("input");

  // Add it to the document
  document.body.appendChild(dummy);

  // Set its ID
  dummy.setAttribute("id", "dummy_id");

  // Output the array into it
  document.getElementById("dummy_id").value=checkbx;

  // Select it
  dummy.select();

  // Copy its contents
  document.execCommand("copy");

  // Remove it as its not needed anymore
  document.body.removeChild(dummy);
}

Und sein HTML-Aufruf:

<button id="btn_test" type="button" onclick="getSelectedCheckboxes('ID_of_chkbxs_selected')">Copy</button>
28
harman

lbruttis Vorstellung einer Antwort ist gut, aber er schreibt einen falschen Code!

function copyToClipboard(text){
    var dummy = document.createElement("input");
    document.body.appendChild(dummy);
    dummy.setAttribute('value', text);
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}
copyToClipboard('Hello, World!')
31
walkman

Sehr hilfreich. Ich habe es geändert, um einen JavaScript-Variablenwert in die Zwischenablage zu kopieren:

function copyToClipboard(val){
    var dummy = document.createElement("input");
    document.body.appendChild(dummy);
    $(dummy).css('display','none');
    dummy.setAttribute("id", "dummy_id");
    document.getElementById("dummy_id").value=val;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}
10
lbrutti

Um allgemeine Texte in die Zwischenablage zu kopieren, habe ich folgende Funktion geschrieben:

function textToClipboard (text) {
    var dummy = document.createElement("textarea");
    document.body.appendChild(dummy);
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

Der Wert des Parameters wird in den Wert eines neu erstellten <textarea> eingefügt, der dann ausgewählt, in die Zwischenablage kopiert und dann aus dem Dokument entfernt wird.

9
Peter Paulovics

Ich habe es geschafft, Text in die Zwischenablage zu kopieren (ohne Textfelder anzuzeigen), indem ich ein verstecktesinput -Element zu body hinzugefügt habe, d. H .:

 function copy(txt){
  var cb = document.getElementById("cb");
  cb.value = txt;
  cb.style.display='block';
  cb.select();
  document.execCommand('copy');
  cb.style.display='none';
 }
<button onclick="copy('Hello Clipboard!')"> copy </button>
<input id="cb" type="text" hidden>
1
Pedro Lobito

Wenn Sie eine Variable in die Zwischenablage in der Chrome-Dev-Konsole kopieren möchten, können Sie einfach den Befehl copy() verwenden.

https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#copyobject

1
Evgeny

Ich möchte nur hinzufügen, wenn jemand zwei verschiedene Eingaben in die Zwischenablage kopieren möchte. Ich benutzte auch die Technik, es in eine Variable zu setzen, und dann den Text der Variablen aus den beiden Eingaben in einen Textbereich zu bringen.

Hinweis: Der folgende Code stammt von einem Benutzer, der nach dem Kopieren mehrerer Benutzereingaben in die Zwischenablage fragt. Ich habe es einfach repariert, damit es richtig funktioniert. Erwarten Sie also einen alten Stil wie var anstelle von let oder const. Ich empfehle auch, addEventListener für die Schaltfläche zu verwenden.

    function doCopy() {

        try{
            var unique = document.querySelectorAll('.unique');
            var msg ="";

            unique.forEach(function (unique) {
                msg+=unique.value;
            });

            var temp =document.createElement("textarea");
            var tempMsg = document.createTextNode(msg);
            temp.appendChild(tempMsg);

            document.body.appendChild(temp);
            temp.select();
            document.execCommand("copy");
            document.body.removeChild(temp);
            console.log("Success!")


        }
        catch(err) {

            console.log("There was an error copying");
        }
    }
<input type="text" class="unique" size="9" value="SESA / D-ID:" readonly/>
<input type="text" class="unique" size="18" value="">
<button id="copybtn" onclick="doCopy()"> Copy to clipboard </button>

0
Richard Ramos

Zum Zeitpunkt des Schreibens hat Setzen von display:none Für das Element nicht funktioniert für mich. Das Setzen der Breite und Höhe des Elements auf 0 funktionierte ebenfalls nicht. Das Element muss also mindestens 1px Breit sein, damit dies funktioniert.

Das folgende Beispiel funktionierte in Chrome und Firefox:

    const str = 'Copy me';
    const el = document.createElement("input");
    // Does not work:
    // dummy.style.display = "none";
    el.style.height = '0px';
    // Does not work:
    // el.style.width = '0px';
    el.style.width = '1px';
    document.body.appendChild(el);
    el.value = str;
    el.select();
    document.execCommand("copy");
    document.body.removeChild(el);

Ich möchte hinzufügen, dass ich sehen kann, warum die Browser versuchen, diesen hackischen Ansatz zu verhindern. Es ist besser, den Inhalt, den Sie kopieren möchten, offen im Browser des Benutzers anzuzeigen. Aber manchmal gibt es Designanforderungen, die wir nicht ändern können.

0
sr9yar