Блог

Я выполняю вызов API, результат которого отображается в таблице. Скажем, столбцы «isbn», «название книги», «год издания». В каждой строке будет значок «копировать в буфер обмена», который будет копировать значение isbn в буфер обмена.

Если быть точным, я не могу скопировать данные[«isbn»] в буфер обмена, когда пользователь нажимает кнопку копировать.

Что я пытался сделать, так это получить данные[«isbn»] и сохранить их как значение foo (входной идентификатор = «foo»). Поскольку функции буфера обмена работают с такими элементами, как ввод и т. Д.

Код:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

<script>
async function books_data{

const response = await fetch('/books');
const data = await response.json();

var table = document.getElementById("myTable");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);

document.getElementById("foo").value = val["JobID"];

cell1.innerHTML = data["isbn"];
cell2.innerHTML = data["name"];
cell3.innerHTML = data["year"];
cell4.innerHTML = '<button class="btn" data-clipboard-target="#foo"> Copy to clipboard </button>" ';

}
</script>
<div>
  <input id="foo" style="display: none">
...
...

</div>

 

Я не понимаю, в чем я ошибаюсь. Я передал эти:
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand, https://clipboardjs.com/

Наиболее популярным методом копирования в буфер обмена является использование Document.execCommand, который, по-видимому, устарел.