Копировать в буфер без Flash

Question

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

Answer 1

Без вспышки это просто невозможно в большинстве браузеров. Буфер обмена пользователя является ресурсом, связанным с безопасностью, поскольку он может содержать такие вещи, как пароли или номера кредитных карт. Таким образом, браузеры по праву не разрешают доступ к нему Javascript (некоторые разрешают его с предупреждением, показывающим, что у пользователя есть подтверждение, или с подписанным кодом Javascript, но ничего из этого не является кросс-браузерным).

Answer 2

Я попробовал флэш-решение, и мне тоже не понравилось. Слишком сложный и слишком медленный. Я создал текстовую область, поместил в нее данные и использовал поведение браузера "CTRL + C".

JQuery Javascript часть:

// catch the "ctrl" combination keydown
$.ctrl = function(key, callback, args) {
    $(document).keydown(function(e) {
        if(!args) args=[]; // IE barks when args is null
        if(e.keyCode == key && e.ctrlKey) {
            callback.apply(this, args);
            return false;
        }
    });
};

// put your data on the textarea and select all
var performCopy = function() {
    var textArea = $("#textArea1");
    textArea.text('PUT THE TEXT TO COPY HERE. CAN BE A FUNCTION.');
    textArea[0].focus();
    textArea[0].select();
};

// bind CTRL + C
$.ctrl('C'.charCodeAt(0), performCopy);

HTML часть:
<textarea id="textArea1"></textarea>

Теперь поместите то, что вы хотите скопировать, в "ПОСТАВИТЬ ТЕКСТ, КОПИРОВАНИЕ ЗДЕСЬ. МОЖЕТ БЫТЬ ФУНКЦИЕЙ. площадь. У меня работает нормально у меня. Вам просто нужно сделать одну комбинацию CTRL + C. Единственным недостатком является то, что на вашем сайте будет отображаться ужасная текстовая область. Если вы используете style="display:none", решение для копирования не будет работать.

Answer 3

Недавно был выпущен clipboard.js для копирования в буфер без использования Flash

Смотрите это в действии здесь> http://zenorocha.github.io/clipboard.js/

Answer 4

Это наконец здесь! (Пока вы не поддерживаете Safari или IE8... -_-)

Теперь вы можете обрабатывать действия буфера обмена без Flash. Вот соответствующая документация:

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en

https://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx

Answer 5

^{В ожидании нетерпеливой поддержки Xbrowser API-интерфейса буфера обмена...}

---

Это будет прекрасно работать в Chrome, Firefox, Edge, IE

IE будет только один раз запрашивать у пользователя доступ к буферу обмена.
Safari (5.1 на момент написания) не поддерживает execCommand за copy/cut

/**
 * CLIPBOARD
 * https://stackru.com/a/33337109/383904
 */
const clip = e => {
  e.preventDefault();
  
  const cont = e.target.innerHTML;
  const area = document.createElement("textarea");
  
  area.value = e.target.innerHTML; // or use .textContent
  document.body.appendChild(area);
  area.select();
 
  if(document.execCommand('copy')) console.log("Copied to clipboard");
  else prompt("Copy to clipboard:\nSelect, Cmd+C, Enter", cont); // Saf, Other
  
  area.remove();
};


[...document.querySelectorAll(".clip")].forEach(el => 
  el.addEventListener("click", clip)
);

<a class="clip" href="#!">Click an item to copy</a><br>
<a class="clip" href="#!"><i>Lorem</i></a><br>
<a class="clip" href="#!"><b>IPSUM</b></a><br>

<textarea placeholder="Paste here to test"></textarea>

Все браузеры (кроме Firefox, который может обрабатывать только MIME-тип) "plain/text" насколько я тестировал) не реализовал API буфера обмена. То есть, пытаясь прочитать событие буфера обмена в Chrome, используя

var clipboardEvent = new ClipboardEvent("copy", {
        dataType: "plain/text",
        data: "Text to be sent to clipboard"
});

throws: Uncaught TypeError: Неверный конструктор

Лучший ресурс невероятного беспорядка, который происходит между браузерами и буфером обмена, можно увидеть здесь (caniuse.com) (→ Следуйте комментариям в разделе "Примечания").
MDN говорит, что базовая поддержка - "(ДА)" для всех браузеров, что является неточным, потому что можно ожидать, что по крайней мере API будет работать вообще.

Answer 6

Вы можете использовать буфер обмена локально для HTML-страницы. Это позволяет копировать / вырезать / вставлять содержимое ВНУТРИ HTML-страницы, но не из / в сторонние приложения или между двумя HTML-страницами.

Вот как вы можете написать собственную функцию для этого (проверено в chrome и firefox):

Вот СКИДКА, которая демонстрирует, как вы можете это сделать.

Я также вставлю скрипку сюда для справки.

---

HTML

<p id="textToCopy">This is the text to be copied</p>
<input id="inputNode" type="text" placeholder="Copied text will be pasted here" /> <br/>

<a href="#" onclick="cb.copy()">copy</a>
<a href="#" onclick="cb.cut()">cut</a>
<a href="#" onclick="cb.paste()">paste</a>

---

JS

function Clipboard() {
    /* Here we're hardcoding the range of the copy
    and paste. Change to achieve desire behavior. You can
    get the range for a user selection using
    window.getSelection or document.selection on Opera*/
    this.oRange = document.createRange();
    var textNode = document.getElementById("textToCopy");
    var inputNode = document.getElementById("inputNode");
    this.oRange.setStart(textNode,0);
    this.oRange.setEndAfter(textNode);
    /* --------------------------------- */
}

Clipboard.prototype.copy = function() {
    this.oFragment= this.oRange.cloneContents();
};

Clipboard.prototype.cut = function() {
    this.oFragment = this.oRange.extractContents();
};

Clipboard.prototype.paste = function() {
    var cloneFragment=this.oFragment.cloneNode(true)
    inputNode.value = cloneFragment.textContent;
};

window.cb = new Clipboard();

Answer 7

document.execCommand('copy') будет делать то, что вы хотите. Но в этой ветке не было примеров, которые можно было бы использовать непосредственно, без всяких искажений, так что вот оно:

var textNode = document.querySelector('p').firstChild
var range = document.createRange()
var sel = window.getSelection()

range.setStart(textNode, 0)
range.setEndAfter(textNode)
sel.removeAllRanges()
sel.addRange(range)
document.execCommand('copy')

Answer 8

Там не обойти, вы должны использовать вспышку. Существует плагин JQuery под названием jquery.copy, который обеспечивает кросс-браузерное копирование и вставку с использованием файла flash (swf). Это похоже на то, как работает подсветка синтаксиса в моем блоге.

После того, как вы ссылаетесь на файл jquery.copy.js, все, что вам нужно сделать, чтобы перенести данные в буфер обмена, это выполнить следующее:

$.copy("some text to copy");

Легко и приятно;)