Копіювати в буфер обміну без Flash

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

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

Я спробував флеш-рішення, і мені теж не сподобалось. Занадто складний і занадто повільний. Я зробив те, щоб створити текстове поле, вкласти в нього дані та використати поведінку браузера "CTRL + C".

Частина JavaScript jQuery:

// 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", рішення для копіювання не буде працювати.

clipboard.js щойно випущений для копіювання в буфер обміну без використання Flash

Подивіться це в дії тут> http://zenorocha.github.io/clipboard.js/#example-action

Це нарешті тут! (Поки ви не підтримуєте 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=uk

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

^{У той час як з нетерпінням чекаючи підтримки Xbrowser з буфера обміну API ...}

IE запропонує користувачеві лише один раз отримати доступ до буфера обміну.
Safari (5,1 на момент написання статті) не підтримує execCommandдляcopy/cut

/**
 * CLIPBOARD
 * https://stackoverflow.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 , який здатний обробляти тільки міміку типу "plain/text", наскільки я перевірив) ще не реалізовані в Clipboard API . Тобто, намагаючись прочитати подію буфера обміну в Chrome за допомогою

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

throws : Uncaught TypeError: Нелегальний конструктор

Найкращий ресурс неймовірного безладу, який відбувається серед браузерів та буфера обміну, можна переглянути тут (caniuse.com) (→ Дотримуйтесь коментарів у розділі "Примітки" ).
MDN каже, що базовою підтримкою є "(ТАК)" для всіх браузерів, що є неточним, оскільки можна очікувати, що принаймні API працюватиме взагалі.

Ви можете використовувати буфер обміну, локальний для сторінки HTML. Це дозволяє копіювати / вирізати / вставляти вміст ВНУТРІ HTML-сторінки, але не з / у сторонні програми або між двома HTML-сторінками.

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

Ось FIDDLE, який демонструє, як ви можете це зробити.

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

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

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

Немає шляху, вам доведеться використовувати спалах. Існує плагін JQuery під назвою jquery.copy, який надав перехресне копіювання та вставлення за допомогою файлу flash (swf). Це схоже на те, як працює підсвітка синтаксису в моєму блозі.

Після посилання на файл jquery.copy.js все, що вам потрібно зробити для переміщення даних у буфер обміну, запускає наступне:

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

Приємно і просто;)