Копировать в буфер обмена Javascript

Смотрите ответ ниже.

Также см.: Как скопировать в буфер обмена в JavaScript? для более старого подхода.

Оригинальный вопрос:

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

function copyToClipboard(text) {
    var selectTableCells = document.querySelector('td');

    selectTableCells.addEventListener('click', function(event) {
        console.log("You copied: ", selectTableCells);
        copyToClipboard(selectTableCells.innerHTML);
    });
}
td,
th {
  border: 1px solid #ccc;
  display: block;
  background-color: #ccc;
  width: 160px;
}
td {
  cursor: pointer;
  text-align: center;
}
<table id="table" class="responsive" style="width:1000px;">
  <tbody>
    <thead>
      <tr>
        <th>Field Type</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td id="cell1">Click me to copy!</td>
      </tr>
    </tbody>
</table>
</div>
<input type="text" style="height:50px;width:300px;" placeholder="For proof of concept. Try to paste here">


javascript html-table
person Joel    schedule 12.05.2015    source источник
comment
Любая вещь, которую вы пробовали.   -  person stanze    schedule 12.05.2015
comment
В своем вопросе вы упомянули, что пробовали разные вещи, я просто прошу вас обновить соответствующие вещи, которые вы пробовали.   -  person stanze    schedule 12.05.2015
comment
возможный дубликат Как скопировать в буфер обмена в JavaScript?< /а>   -  person vidriduch    schedule 12.05.2015
comment
ой. Ok. ссылка Но это не то, что мне нужно. я просто хочу, чтобы пользователь нажал ячейку (значение), и она будет скопирована.   -  person Joel    schedule 12.05.2015
comment
Привет. Я включил содержание вашего комментария в вопрос и немного переформулировал ваш вопрос. Попробуйте добавить соответствующую информацию непосредственно в свой вопрос, а не в комментарий. Удачи!   -  person Félix Adriyel Gagnon-Grenier    schedule 15.05.2015

Ответы (2)


arrow_upward
2
arrow_downward

Ответ из будущего (2020):

Появился API буфера обмена

Этот фрагмент извлекает текст из буфера обмена и добавляет его к первому элементу, найденному с помощью редактора классов. Поскольку readText() (и read(), если уж на то пошло) возвращает пустую строку, если в буфере обмена нет текста, этот код безопасен.

navigator.clipboard.readText().then(
    clipText => document.querySelector(".editor").innerText += clipText);

Методы:

Примечание. Все методы возвращают обещание.

читать()

var getClipboardData = navigator.clipboard.read();

Метод read() интерфейса буфера обмена запрашивает копию содержимого буфера обмена, возвращает обещание. В отличие от readText(), метод read() может возвращать произвольные данные, например изображения. Этот метод также может возвращать текст.

читатьтекст()

var getClipboardText = navigator.clipboard.readText();

Возвращает пустую строку, если буфер обмена пуст, не содержит текста или не включает текстовое представление среди объектов DataTransfer, представляющих содержимое буфера обмена.

записывать()

var setClipboardData = navigator.clipboard.write(data);

Обещание отклоняется, если буфер обмена не может завершить доступ к буферу обмена.

написатьтекст()

var setClipboardText = navigator.clipboard.writeText(newClipText);

Обещание отклоняется, если вызывающая сторона не имеет разрешения на запись в буфер обмена.

Интерфейсы:

Clipboard Secure context

Предоставляет интерфейс для чтения и записи текста и данных в или из системного буфера обмена. В спецификации это называется «API асинхронного буфера обмена».

ClipboardEvent Secure context

Представляет события, предоставляющие информацию, связанную с изменением буфера обмена, то есть события вырезания, копирования и вставки. В спецификации это называется «API событий буфера обмена».

ClipboardItem Secure context

Представляет формат одного элемента, используемый при чтении или записи данных.

Дополнительные сведения см. в разделе API буфера обмена.

person Joel    schedule 20.10.2020
comment
Для получения дополнительной информации об этом API прочитайте статью с примерами для всех операций. - person DenverCoder9; 16.12.2020

arrow_upward
0
arrow_downward

попробуйте этот атрибут contenteditable="true" и попробуйте перейти по этой ссылке, чтобы скопировать содержимое буфера обмена, выполнить ctrl + c

person Karthikeyan    schedule 12.05.2015