Подтвердить что ты не робот

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

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

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

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

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

(Фокус не является абсолютно необходимым)

4b9b3361

Ответ 1

ExecCommand ( 'копия')

Есть очень новый вариант. Это кросс-браузер, но это займет время, пока все не обновят свой браузер.

Работает с помощью функции document.execCommand('copy');. С помощью этой функции вы скопируете выделенный текст. Это будет работать не только с textarea, но и с каждым выделенным текстом на веб-странице (например, в 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>
   

Ответ 2

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

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

Обратитесь к следующим ссылкам:

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

Ответ 3

Теперь мы Clipboard.js от @zenorocha

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

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

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

new Clipboard('.trigger');

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

Ответ 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;
}

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

Ответ 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() в событие щелчка на все, что вы хотите, чтобы запустить событие. Это доступно для использования как на мобильных, так и на настольных операционных системах.

Объяснение

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