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

javascript jquery copy clipboard

65554 просмотра

5 ответа

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

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

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

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

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

Автор: Nick Brunt Источник Размещён: 12.11.2019 09:50

Ответы (5)


63 плюса

Решение

ExecCommand ( 'копировать')

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

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

Автор: arcs Размещён: 02.07.2015 07:20

18 плюса

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

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

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

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

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

Автор: Devin Burke Размещён: 09.06.2011 11:00

9 плюса

Теперь у нас есть Clipboard.js от @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

Автор: Gabriel Gularte Размещён: 02.10.2015 10:19

7 плюса

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;
}

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

Автор: Iyappan Размещён: 02.09.2016 02:46

1 плюс

Это довольно поздний ответ, но для тех, кто ищет в будущем и испытывает проблемы с реализацией события 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 для определения, сработал ли метод рабочего стола, и если нет, для запуска кода, который будет работать для мобильного устройства. Этот метод не требует загрузки или ссылки необходимы. Оба метода выделяют текст, который вы хотите скопировать, затем запускают команду копирования в буфер обмена, после чего отмените выбор строки, которую вы пытаетесь скопировать. Вы можете смешивать код по своему вкусу, но это способ сделать это.

Автор: MattOlivos Размещён: 19.04.2017 03:25
Вопросы из категории :
32x32