Копировать / Поместить текст в буфер обмена с FireFox, Safari и Chrome - PullRequest
110 голосов
/ 24 сентября 2008

В Internet Explorer я могу использовать объект clipboardData для доступа к буферу обмена. Как я могу сделать это в FireFox, Safari и / или Chrome?

Ответы [ 18 ]

49 голосов
/ 24 сентября 2008

В целях безопасности Firefox не позволяет размещать текст в буфере обмена. Тем не менее, есть обходной путь, использующий Flash.

function copyIntoClipboard(text) {

    var flashId = 'flashId-HKxmj5';

    /* Replace this with your clipboard.swf location */
    var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';

    if(!document.getElementById(flashId)) {
        var div = document.createElement('div');
        div.id = flashId;
        document.body.appendChild(div);
    }
    document.getElementById(flashId).innerHTML = '';
    var content = '<embed src="' + 
        clipboardSWF +
        '" FlashVars="clipboard=' + encodeURIComponent(text) +
        '" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashId).innerHTML = content;
}

Единственным недостатком является то, что для этого требуется, чтобы Flash был включен.

источник в настоящее время мертв: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ (как и кеш Google )

19 голосов
/ 02 декабря 2015

Существует способ легко сделать это в большинстве современных браузеров, используя

document.execCommand('copy');

Это скопирует выбранный текст. Вы можете выбрать textArea или поле ввода, используя

document.getElementById('myText').select();

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

В целях безопасности браузеры разрешают вам копировать только в том случае, если пользователь предпринимает какие-либо действия (например, нажимает кнопку). Один из способов сделать это - добавить событие onClick к кнопке html, которая вызывает метод, который копирует текст.

Полный пример будет выглядеть как

<html>
<head>
    <title>copy test</title>
</head>
<body>
    <button onclick="copier()">Copy</button>
    <textarea id="myText">Copy me PLEASE!!!</textarea>

    <script>
        function copier(){
            document.getElementById('myText').select();
            document.execCommand('copy');
        }
    </script>
</body>
</html>
13 голосов
/ 01 июня 2009

Онлайн-таблицы перехватывают события Ctrl + C, Ctrl + V и переносят фокус на скрытый элемент управления TextArea и либо устанавливают для его содержимого желаемое новое содержимое буфера обмена для копирования, либо читают его после завершения события для вставки.

см. Также Можно ли читать буфер обмена в Firefox, Safari и Chrome, используя Javascript?

10 голосов
/ 11 августа 2015

Это лето 2015, и с такой суматохой вокруг Flash я подумал, что добавлю новый ответ на этот вопрос, который полностью исключает его использование.

clipboard.js - хорошая утилита, которая позволяет копировать текстовые или html-данные в буфер обмена. Его очень просто использовать, просто включите .js и используйте что-то вроде этого:

<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>

clipboard.js также включен GitHub

9 голосов
/ 19 апреля 2017

В 2017 году вы можете сделать это (говоря это, потому что этой теме почти 9 лет!)

function copyStringToClipboard (string) {
    function handler (event){
        event.clipboardData.setData('text/plain', string);
        event.preventDefault();
        document.removeEventListener('copy', handler, true);
    }

    document.addEventListener('copy', handler, true);
    document.execCommand('copy');
}

А теперь скопировать copyStringToClipboard('Hello World')

Если вы заметили строку setData и задались вопросом, можете ли вы установить разные типы данных, ответ - да.

8 голосов
/ 24 сентября 2008

Firefox позволяет хранить данные в буфере обмена, но из-за проблем с безопасностью он по умолчанию отключен. Узнайте, как включить его в «Предоставление JavaScript доступа к буферу обмена» в базе знаний Mozilla Firefox.

Решение, предлагаемое amdfan, является наилучшим, если у вас много пользователей, а настройка их браузера невозможна. Хотя вы можете проверить, доступен ли буфер обмена, и предоставить ссылку для изменения настроек, если пользователи разбираются в технологиях. Редактор JavaScript TinyMCE следует этому подходу.

5 голосов
/ 14 января 2009

Функция copyIntoClipboard () работает для Flash 9, но, похоже, она не работает при выпуске Flash player 10. Вот решение, которое работает с новым flash player:

http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

Это сложное решение, но оно работает.

4 голосов
/ 07 февраля 2009

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

В настоящее время я использую его на своем собственном сайте (http://www.blogtrog.com),, но я заметил странные ошибки с ним. Способ работы ZeroClipboard заключается в том, что он помещает невидимый flash-объект поверх элемента на на вашей странице. Я обнаружил, что если мой элемент перемещается (например, когда пользователь изменяет размеры окна, и у меня все правильно выровнено), флэш-объект ZeroClipboard выходит из строя и больше не закрывает объект. Я подозреваю, что он, вероятно, все еще сидит где он был изначально. У них есть код, который должен остановить это или привязать его к элементу, но, похоже, он не работает хорошо.

Итак ... в следующей версии BlogTrog, я думаю, я последую примеру всех других подсветчиков кода, которые я видел в дикой природе, и уберу кнопку «Копировать в буфер обмена». : - (

(Я заметил, что копирование в буфер обмена dp.syntaxhiglighter теперь также не работает.)

3 голосов
/ 09 апреля 2011

слишком старый вопрос, но я нигде не видел ответа ...

Проверьте эту ссылку:

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

как все говорили, по соображениям безопасности по умолчанию отключено. ссылка выше показывает инструкции о том, как включить его (отредактировав about: config в firefox или user.js).

К счастью, существует плагин под названием «AllowClipboardHelper», который облегчает работу всего за несколько кликов. однако вам все равно нужно проинструктировать посетителей вашего сайта о том, как включить доступ в Firefox.

2 голосов
/ 28 июня 2010

Я использовал Github's Clippy для своих нужд, простую кнопку на основе Flash. Работает просто отлично, если не нужно стилизовать и доволен, вставив что вставить на стороне сервера.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...