Копировать вывод переменной JavaScript в буфер обмена

Я не знаю JavaScript, но мне удалось собрать этот код, используя бит и болты из различных ответов на переполнение стека. Он работает нормально, и он выдает массив всех выбранных флажков в документе через окно предупреждения.

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

И, чтобы назвать это, я использую:

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

Теперь я хотел бы изменить его, поэтому, когда я btn_test кнопку btn_test, выходной массив checkbx массива копируется в буфер обмена. Я попытался добавить:

checkbx = document.execCommand("copy");

или

checkbx.execCommand("copy");

в конце функции, а затем называя ее следующим образом:

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

Но это не работает. Данные не копируются в буфер обмена.

Ответ 1

Хорошо, я нашел некоторое время и последовал предложению Теему, и я смог получить именно то, что хотел.

Итак, вот окончательный код для тех, кто может быть заинтересован. Для пояснения этот код получает все флажки с определенным идентификатором, выводит их в массив, названный здесь checkbx, а затем копирует свое уникальное имя в буфер обмена.

Функция JavaScript:

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);
}

И его вызов HTML:

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

Ответ 2

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

Ответ 3

Очень полезно. Я изменил его, чтобы скопировать значение переменной JavaScript в буфер обмена:

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);
}

Ответ 4

Для общих целей копирования любого текста в буфер обмена я написал следующую функцию:

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

Значение параметра вставляется в значение вновь созданного <textarea>, которое затем выбирается, его значение копируется в буфер обмена, а затем удаляется из документа.

Ответ 5

Когда вам нужно скопировать переменную в буфер обмена в консоли Chrome dev, вы можете просто использовать команду copy().

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

Ответ 6

Мне удалось скопировать текст в буфер обмена (без отображения текстовых полей), добавив скрытый элемент input в body, то есть:

 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>

Ответ 7

Я просто хочу добавить, если кто-то хочет скопировать два разных входа в буфер обмена. Я также использовал технику поместить его в переменную, а затем поместил текст переменной из двух входов в текстовую область.

Примечание: приведенный ниже код - от пользователя, спрашивающего, как копировать несколько пользовательских входов в буфер обмена. Я просто исправил его, чтобы он работал правильно. Поэтому ожидайте какой-то старый стиль, как использование var вместо let или const. Я также рекомендую использовать addEventListener для кнопки.

    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>

Ответ 8

На момент написания статьи установка display:none для элемента не работала для меня. Установка ширины и высоты элемента в 0 также не работала. Поэтому элемент должен иметь ширину не менее 1px, чтобы это работало.

Следующий пример работал в Chrome и 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);

Я хотел бы добавить, что я понимаю, почему браузеры пытаются предотвратить этот хакерский подход. Лучше открыто показать контент, который вы собираетесь скопировать в браузер пользователя. Но иногда есть требования к дизайну, мы не можем измениться.