Kopieren Sie die Ausgabe einer JavaScript-Variablen in die Zwischenablage

Ich habe keine Kenntnisse in JavaScript, aber ich habe es geschafft, diesen Code mithilfe von Bits und Bolzen aus verschiedenen Antworten zum Stapelüberlauf zusammenzusetzen. Es funktioniert einwandfrei und gibt über ein Warnfeld ein Array aller ausgewählten Kontrollkästchen in einem Dokument 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, benutze 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 so ändern, dass beim Klicken auf die btn_testSchaltfläche das Ausgabearray checkbxin die Zwischenablage kopiert wird. Ich habe versucht hinzuzufügen:

checkbx = document.execCommand("copy");

oder

checkbx.execCommand("copy");

am Ende der Funktion und dann aufrufen wie:

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

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

function copyToClipboard(text) {
    var dummy = document.createElement("textarea");
    // to avoid breaking orgain page when copying more words
    // cant copy when adding below this code
    // dummy.style.display = 'none'
    document.body.appendChild(dummy);
    //Be careful if you use texarea. setAttribute('value', value), which works with "input" does not work with "textarea". – Eduard
    dummy.value = text;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}
copyToClipboard('hello world')
copyToClipboard('hello\nworld')

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

Hier ist der endgültige Code für alle, die interessiert sein könnten. Zur Verdeutlichung ruft dieser Code alle aktivierten Kontrollkästchen einer bestimmten ID ab, gibt sie in einem hier genannten Array aus checkbxund 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>

Für allgemeine Zwecke zum Kopieren von Text in die Zwischenablage habe ich die 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 Parameters eingefügt <textarea>, der dann ausgewählt, in die Zwischenablage kopiert und dann aus dem Dokument entfernt wird.

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

function copyToClipboard(val){
    var dummy = document.createElement("input");
    dummy.style.display = 'none';
    document.body.appendChild(dummy);

    dummy.setAttribute("id", "dummy_id");
    document.getElementById("dummy_id").value=val;
    dummy.select();
    document.execCommand("copy");
    document.body.removeChild(dummy);
}

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

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

Ich habe es geschafft, Text in die Zwischenablage zu kopieren ( ohne Textfelder anzuzeigen ), indem ich ein verstecktes input Element hinzugefügt habe body, dh:

 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>

Zum Zeitpunkt des Schreibens hat das Einstellen display:nonedes Elements bei mir nicht funktioniert . Das Setzen der Breite und Höhe des Elements auf 0 hat ebenfalls nicht funktioniert. Das Element muss also mindestens sein1px breit sein, damit dies funktioniert.

Das folgende Beispiel hat in Chrome und Firefox funktioniert:

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

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

Hinweis: Der folgende Code stammt von einem Benutzer, der fragt, wie mehrere Benutzereingaben in die Zwischenablage kopiert werden sollen. Ich habe es gerade repariert, damit es richtig funktioniert. Erwarten Sie also einen alten Stil wie die Verwendung von varanstelle von letoder const. Ich empfehle auch, addEventListenerfü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>

Heutzutage gibt es eine neue (ish) API , um dies direkt zu tun. Es funktioniert nur in modernen Browsern und unter HTTPS (und localhost). Wird von IE11 nicht unterstützt.

IE11 hat eine eigene API.

Die Problemumgehung in der akzeptierten Antwort kann für unsichere Hosts verwendet werden.

function copyToClipboard (text) {
  if (navigator.clipboard) { // default: modern asynchronous API
    return navigator.clipboard.writeText(text);
  } else if (window.clipboardData && window.clipboardData.setData) {     // for IE11
    window.clipboardData.setData('Text', text);
    return Promise.resolve();
  } else {
    // workaround: create dummy input
    const input = h('input', { type: 'text' });
    input.value = text;
    document.body.append(input);
    input.focus();
    input.select();
    document.execCommand('copy');
    input.remove();
    return Promise.resolve();
  }
}

Hinweis: Zum Erstellen des Eingabeelements wird Hyperscript verwendet (sollte jedoch leicht anzupassen sein).

Die Eingabe muss nicht unsichtbar gemacht werden, da sie so schnell hinzugefügt und entfernt wird. Auch wenn sie versteckt sind (selbst mit einer cleveren Methode), erkennen einige Browser dies und verhindern den Kopiervorgang.