Копировать выделенный текст в буфер обмена БЕЗ использования flash - должен быть кросс-браузер

Question

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

Конечно, это выполнимо? Я видел это повсюду, но я думаю, что они используют вспышку, от которой я действительно хочу держаться подальше, если это возможно, поскольку у некоторых людей ее нет.

Это то, что у меня пока есть - он просто выделяет текст:

function copyCode() {
  $("#output-code").focus();
  $("#output-code").select();
}

(фокус не обязателен)

Answer 1

execCommand ('copy')

Существует очень новая опция.Это кросс-браузер, но потребуется время, пока все обновят свой браузер.

Он работает с помощью функции document.execCommand('copy');.С помощью этой функции вы будете копировать выделенный текст.Это будет работать не только с textarea s, но и с каждым выделенным текстом на веб-странице (например, span, p, div и т. Д.).

Доступно в Internet Explorer 10+,Chrome 43+, Opera 29+ и Firefox 41+ (см. execCommand совместимость здесь ).

Пример

// Setup the variables
var textarea = document.getElementById("textarea");
var answer  = document.getElementById("copyAnswer");
var copy    = document.getElementById("copyBlock");
copy.addEventListener('click', function(e) {

   // Select some text (you could also create a range)
   textarea.select(); 

   // Use try & catch for unsupported browser
   try {

       // The important part (copy selected text)
       var ok = document.execCommand('copy');

       if (ok) answer.innerHTML = 'Copied!';
       else    answer.innerHTML = 'Unable to copy!';
   } catch (err) {
       answer.innerHTML = 'Unsupported Browser!';
   }
});

<textarea id="textarea" rows="6" cols="40">
Lorem ipsum dolor sit amet, eamsemper maiestatis no.
</textarea><br/>

<button id="copyBlock">Click to copy</button> <span id="copyAnswer"></span>
   

Answer 2

Для автоматического копирования текста в буфер обмена клиента необходимо использовать надстройку Flash, которую вы не хотите использовать. Веб-сайт, автоматически изменяющий буфер обмена клиента без помощи компонентов active-x, представляет собой проблему безопасности. Обратите внимание, что компоненты active-x - это программы, которые запускаются на компьютере пользователя и технически требуют согласия пользователя для установки. Учитывая, что буфер обмена является компонентом операционной системы, радуйтесь, что веб-браузеры не позволяют веб-сайтам использовать его по умолчанию.

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

Пожалуйста, обратитесь к следующим ссылкам переполнения стека:

1. Как скопировать в буфер обмена в JavaScript?
2. Обнаружение кросс-браузерной вспышки в Javascript

Окончательный ответ - использовать Zero Clipboard, библиотеку, которая использует небольшой невидимый Flash-ролик и JavaScript, чтобы использовать функции буфера обмена, как вам нужно. Библиотека доступна здесь: https://github.com/zeroclipboard/zeroclipboard Вторая ссылка показывает, как определить, отключена ли Flash или не установлена, что позволяет отображать предупреждающее сообщение так же, как и для JavaScript.

Answer 3

Теперь у нас есть Clipboard.js by @ zenorocha

Чтобы использовать его, загрузите и вызовите скрипт на вашем page.html (или установите с помощью bower или npm)

<script src="path_to_script/clipboard.min.js"></script>

Создайте новый триггер в вашем script.js

new Clipboard('.trigger');

И перейдите туда, чтобы увидеть несколько примеров использования: http://zenorocha.github.io/clipboard.js/#usage

Answer 4

function copyTextToClipboard(text) {
    var textArea = document.createElement("textarea");
    textArea.style.position = 'fixed';
    textArea.style.top = 0;
    textArea.style.left = 0;  
    textArea.style.width = '2em';
    textArea.style.height = '2em'; 
    textArea.style.padding = 0;  
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';   
    textArea.style.background = 'transparent';
    textArea.value = text;
    textArea.id = 'ta';
    document.body.appendChild(textArea);
    //textArea.select();
    var range = document.createRange();
    range.selectNode(textArea);
    textArea.select();
    window.getSelection().addRange(range);
    try {
        var successful = document.execCommand('copy');
    } catch (err) {
         alert('Oops, unable to copy');
    }
    document.body.removeChild(textArea);
    return successful;
}

Надеюсь, это полезно

Answer 5

Это довольно поздний ответ, но для тех, кто ищет в будущем и испытывает трудности с реализацией события execCommand ('copy') для работы как на настольных, так и на мобильных устройствах.

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

function CopyString(){
    var StringToCopyElement = document.getElementById('YourId');
    StringToCopyElement.select();

    if(document.execCommand('copy')){
        StringToCopyElement.blur();     
    }else{
        CopyStringMobile();
    }
}

function CopyStringMobile(){
    document.getElementById("YourId").selectionStart = 0;
    document.getElementById("YourId").selectionEnd = 999;
    document.execCommand('copy');

    if (window.getSelection) {
      if (window.getSelection().empty) {  // Chrome
        window.getSelection().empty();
      } else if (window.getSelection().removeAllRanges) {  // Firefox
        window.getSelection().removeAllRanges();
      }
    } else if (document.selection) {  // IE?
      document.selection.empty();
    }
}

Установите функцию CopyString () для события click для любогос нетерпением жду события.Это доступно для использования как в мобильных, так и в настольных операционных системах.

Пояснение

Необходимо выбрать два различных способа выбора строки для копирования, посколькуНа сегодняшний день способ сделать это с помощью настольного компьютера не будет работать для мобильных устройств.У меня есть функция if then для определения, сработал ли метод рабочего стола, и если нет, для запуска кода, который будет работать для мобильного устройства.Этот метод не требует загрузки или ссылки необходимы.Оба метода выделяют текст, который вы хотите скопировать, затем запускают команду копирования в буфер обмена, после чего отмените выбор строки, которую вы пытаетесь скопировать.Вы можете смешивать код по своему вкусу, но это способ сделать это.