Как скопировать текст кнопки?

Question

Я хочу скопировать текст с кнопки, когда я нажимаю на нее. Я повторно использовал код из w3 школ . Разница с кодом школы w3 заключается в том, что когда вы нажимаете на кнопку, она копирует текст из ввода, я хочу скопировать текст с кнопки, на которую нажимаю.

function copyClipboard() {
  var copyText = document.getElementById("myButton").innerHTML;
  document.execCommand("copy");
}

<button id="myButton" onclick="copyClipboard()">Text I want to copy</button>

Когда я копирую текст console.log, он отображает текст с кнопки, но мой текст никогда не копируется.

Знаешь почему?

Answer 1

Ваша проблема в том, что вы храните только value из button, но ничего не выбираете, поэтому ничего не будет скопировано в буфер обмена.

Вам необходимо поместить это содержимое в input и выбрать его значение , используя .select(), чтобы его можно было скопировать:

function copyClipboard() {
  var copyText = document.getElementById("myButton").innerHTML;
  
  var input = document.createElement("input");
  input.value = copyText;
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input); 
}

<button id="myButton" onclick="copyClipboard()">Text I want to copy</button>

Answer 2

function copyClipboard() {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(document.getElementById("myButton").innerHTML).select();
    document.execCommand("copy");
    $temp.remove();
}
<button id="myButton" onclick="copyClipboard()">Text I want to copy</button>