Альтернатива HTML5 для Flash-платформы ZeroClipboard для безопасного копирования данных в буфер обмена?

Ответ 1

Мы полагаем, что автоматическое копирование в буфер обмена может быть очень опасным, поэтому большинство браузеров (кроме IE) * затрудняют работу, если вы не используете flash.

Как и ваш ZeroClipboard, есть Clipboard LMCButton, в котором также используется небольшая вспышка script, работающая в фоновом режиме.

Общим решением было бы сделать это:

 function copyToClipboard (text) {
     window.prompt ("Copy to clipboard: Ctrl+C, Enter", text);
 }

Что я нашел у Ярека Милевского, когда кто-то еще задал вопрос здесь

* Да, я нашел одно решение для IE, однако не работает в большинстве современных браузеров, здесь > .

Ответ 2

Я знаю, что этот ответ наступает немного позже, но теперь есть новая современная альтернатива ZeroClipboard (основанная на Flash). Clipboard.js - это альтернатива 2kB pure JavaScript, у которой нет зависимостей.

Ответ 3

Я создал чистое решение JavaScript под названием clip-j. Здесь это. В основном, это то, что он использует document.execCommand('copy'); с несколькими другими командами, которые делают так, чтобы вы ничего не видели. Здесь код:

function clip(text) {   
    var copyElement = document.createElement('input');      
    copyElement.setAttribute('type', 'text');   
    copyElement.setAttribute('value', text);    
    copyElement = document.body.appendChild(copyElement);   
    copyElement.select();   
    document.execCommand('copy');   
    copyElement.remove();
}

Ответ 4

Вы можете посмотреть это сообщение в блоге для подробного обсуждения того, как работать с буфером обмена в HTML5. К сожалению, вы по-прежнему не можете переносить копии в буфер обмена по клику. Тем не менее, для chrome и firefox вы можете создать расширение браузера, которое может дать вашему сайту разрешение на доступ к буферу, и я полагаю, что IE позволит вам скопировать в буфер обмена, но предложит пользователю предоставить разрешение.

Обновление

В соответствии с этим: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand Firefox 41+, Chrome 42+ и IE 9+ поддерживают команду копирования с помощью execCommand. Для firefox и chrome он будет работать только в том случае, если это вызвано действием пользователя, таким как щелчок, и для IE он даст пользователю диалоговое окно с запросом на разрешение на копирование в буфер обмена.

Ответ 5

Чтобы использовать execCommand, вы должны сначала выбрать() что-то на странице, чтобы не копировать все, что было последним, в буфер обмена. С помощью этой функции я передаю идентификатор входного текстового поля в функцию и выберите(), а затем выполним команду копирования. Не нужно добавлять слушателей или еще больше усложнять ваш код. Document.execCommand() возвращает false, если не включен или поддерживается, поэтому вы можете использовать window.prompt в качестве метода резервного копирования.

function copyToClipboard(id) {
    var blnCopied;
    document.getElementById(id).select();
    blnCopied = document.execCommand("copy", false, null);
    if (blnCopied)
        alert('Link copied to clipboard');
    else
        window.prompt ("Copy to clipboard: Ctrl+C, Enter", jQuery("#"+id).val());
}

Использовать стандартный якорный тег "a" с onclick = "copyToClipboard (" some_id ")"

Ответ 6

На этот вопрос есть отличные ответы, и я решил использовать этот фрагмент:

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

Однако, если на вашей странице есть выбор начальной загрузки, строка $temp.val($(element).text()).select() выдаст ошибку:

Виджет может работать только с выделенными элементами

Вместо этого вы можете использовать .trigger('select'), как указано в документации jQuery для .select(), например:

$temp.val($(element).val()).trigger('select');