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

Question

С выходом флэш-памяти во многих средах (iPhone, Android, IE10 и т. Д.), Есть ли какое-либо новое решение в любых браузерах, которое позволит безопасно копировать информацию в буфер обмена без установленной флэш-памяти?

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

Answer 1

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

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

Распространенным решением будет сделать это:

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

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

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

Answer 2

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

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

Answer 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 он выдаст пользователю диалоговое окно с предупреждением, запрашивающим разрешение на копирование в буфер обмена.

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

Answer 6

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

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

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

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

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

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