Скопировать в буфер обмена с jQuery/js в Chrome

Ответ 1

Я просто нахожу еще один потрясающий репо на Github.

Современная копия в буфер обмена. Нет вспышки. Всего 3 КБ разархивировано

https://github.com/zenorocha/clipboard.js

Поддержка браузера:

Ответ 2

Вы можете использовать либо document.execCommand('copy'), либо addEventListener('copy'), либо комбинацию обоих.

1. выбор копии на пользовательском мероприятии

Если вы хотите вызвать copy для какого-либо другого события, кроме ctrl-c или щелкнуть правой кнопкой мыши, используйте document.execCommand('copy'). Он скопирует выбранные в настоящее время. Например, при помощи мыши, например:

elem.onmouseup = function(){
    document.execCommand('copy');
}

EDIT:

document.execCommand('copy') поддерживается только Chrome 42, IE9 и Opera 29, но будет поддерживаться firefox 41 (запланировано на сентябрь 2015 года). Обратите внимание, что IE обычно запрашивает разрешение на доступ к буферу.

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

2. копировать пользовательский контент при копировании, вызванном пользователем

Или вы можете использовать addEventListener('copy'), это будет мешать событию копирования, и вы можете поместить туда контент. Предположим, пользователь запускает копию.

EDIT:

В Chrome, Firefox и Safari событие имеет объект clipboardData с методом setData. В IE объект clipboardData является свойством окна. Таким образом, это может работать на всех основных браузерах, если вы проверяете, где находится clipboardData.

 elem2.addEventListener('copy', function (e) {
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content');
    }

});

https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData https://msdn.microsoft.com/en-us/library/ms535220(v=vs.85).aspx

3. бит как

Используя комбинацию, вы можете скопировать пользовательский контент в нужные события. Таким образом, первое событие запускает execCommand, затем помещается listener. Например, поместите пользовательский контент в клик на div.

  elem3.onclick = function () {
        document.execCommand('copy');
    }

   elem3.addEventListener('copy', function (e) {

    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content from click');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content from click');
    }

});

Используя этот последний, предполагается, что оба подхода поддерживаются, по состоянию на июль 2015 года он работает только на Chrome 43 (может быть, 42 я не смог проверить) и IE не менее 9 и 10. С поддержкой Firefox 41 execcommand('copy'), он также должен работать.

Обратите внимание, что для большинства этих методов и свойств объявляются как экспериментальные (или даже устаревшие для IE), поэтому их следует использовать осторожно, но похоже, что они все больше поддерживаются.

Скрипт со всеми примерами: https://jsfiddle.net/jsLfnnvy/12/

Ответ 3

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

var text = 'text to copy';
var copyFrom = $('<textarea/>');
copyFrom.css({
 position: "absolute",
 left: "-1000px",
 top: "-1000px",
});
 copyFrom.text(text);
 $('body').append(copyFrom);
 copyFrom.select();
 document.execCommand('copy');

Ответ 4

Собственно, для тех, кто это выясняет, я получил его для работы в хроме, основываясь на ответе @JulianGregoire.

Я переписал код, чтобы сделать его немного лучше, на мой взгляд:

el.onclick = function () {
    var copy = function (e) {
        e.preventDefault();
        console.log('copy');
        var text = "blabla"
        if (e.clipboardData) {
            e.clipboardData.setData('text/plain', text);
        } else if (window.clipboardData) {
            window.clipboardData.setData('Text', text);
        }
    }
    window.addEventListener('copy', copy);
    document.execCommand('copy');
    window.removeEventListener('copy', copy);
}

Ответ 5

Опасайтесь: я пробовал точно такой же script у Жюльена Грегуара, но это не вызвало прослушиватель событий oncopy. Причина: у меня был пользовательский CSS-код для тега body.

Поэтому убедитесь, что вы удалили его, или установите его на initial в элементе, к которому подключен прослушиватель событий.

Пример: https://jsfiddle.net/faimmedia/jsLfnnvy/80/

Ответ 6

Если вы используете нокаут, как и я (по какой-то причине я до сих пор), вам нужно взглянуть на этот вопрос/ответ:

Как заставить KnokoutJS и ClipboardJS работать вместе?

Ответ 7

Если вы не возражаете против IE/Safari, вы можете использовать следующий (новый) API:

var promise = navigator.clipboard.writeText(newClipText)

Читайте документы здесь

Ответ 8

function copyToClipboard(s) {
    if (window.clipboardData && clipboardData.setData) {
        clipboardData.setData('text', s);
    }
}

Затем вызовите функцию с текстом, и это должно работать.