Как мне скопировать в буфер обмена в JavaScript?

Question

Как лучше всего скопировать текст в буфер обмена? (Мульти-браузер)

Я пробовал:

function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {  
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  
        clipboardHelper.copyString(text);
    }
}

но в Internet Explorer выдает синтаксическую ошибку. В Firefox написано unsafeWindow is not defined.

Хороший трюк без вспышки: Как Trello получает доступ к буферу обмена пользователя?

Answer 1

Похоже, вы взяли код из Greasemonkey \ JavaScript Кнопка "Копировать в буфер обмена" или исходный код этого фрагмента ...

Этот код был для Greasemonkey, следовательно, unsafeWindow. И я предполагаю, что синтаксическая ошибка в IE происходит от ключевого слова const, характерного для Firefox (замените его на var).

Answer 2

Мне пришлось скопировать текст со страниц без ввода (текст внутри любого тега div / span) со страницы и придумать следующий код. Единственная хитрость заключается в том, чтобы иметь скрытое поле, но, как тип TEXT, не будет работать со скрытым типом.

    function copyToClipboard(sID) {
        var aField = document.getElementById("hiddenField");

        aField.hidden   = false;
        aField.value    = document.getElementById(sID).textContent;
        aField.select();
        document.execCommand("copy");
        alert("Following text has been copied to the clipboard.\n\n" + aField.value);
        aField.hidden = true;
    }

А в HTML добавьте следующее

input type = "text" id = "hiddenField" style = "width: 5px; border: 0" /> ...

Answer 3

Насколько я знаю, это работает только в Internet Explorer.

См. Также Динамические инструменты - JavaScript Copy To Clipboard , но для этого требуется, чтобы пользователь сначала изменил конфигурацию, и даже в этом случае она не работает.

Answer 4

По соображениям безопасности вы не можете этого сделать. Вы должны выбрать Flash для копирования в буфер обмена.

Я предлагаю это: http://zeroclipboard.org/

Answer 5

Если скопированная ссылка должна быть вставлена ​​на тот же сайт, то простое решение состоит в том, чтобы выделить текст перед нажатием простой кнопки копирования HTML, а затем при нажатии, текстовое содержимое сохраняется в сеансе. И там, где его нужно вставить, есть кнопка вставки.

** Я знаю, это не постоянное и универсальное решение, но это нечто:)

Answer 6

@ Джимбо, вот простой буфер обмена на основе Ajax / сессии для того же сайта.

Обратите внимание, что сеанс должен быть включен и действителен, и это решение работает для того же сайта. Я проверил его на CodeIgniter, но столкнулся с проблемой сессии / Ajax, но эта тоже решила эту проблему. Если вы не хотите играть с сессиями, используйте таблицу базы данных.

JavaScript / JQuery

<script type="text/javascript">
    $(document).ready(function() {

        $("#copy_btn_id").click(function(){

            $.post("<?php echo base_url();?>ajax/foo_copy/"+$(this).val(), null,
                function(data){
                    // Copied successfully
                }, "html"
            );
        });

        $("#paste_btn_id").click(function() {

           $.post("<?php echo base_url();?>ajax/foo_paste/", null,
               function(data) {
                   $('#paste_btn_id').val(data);
               }, "html"
           );
        });
    });
</script>

HTML-контент

<input type='text' id='copy_btn_id' onclick='this.select();'  value='myvalue' />
<input type='text' id='paste_btn_id' value='' />

PHP код

<?php
    class Ajax extends CI_Controller {

        public function foo_copy($val){
            $this->session->set_userdata(array('clipboard_val' => $val));
        }

        public function foo_paste(){
            echo $this->session->userdata('clipboard_val');
            exit();
        }
    }
?>

Answer 7

Если вы читаете текст из буфера обмена в расширении Chrome с разрешением «clipboardRead», вы можете использовать следующий код:

function readTextFromClipboardInChromeExtension() {
    var ta = $('<textarea/>');
    $('body').append(ta);
    ta.focus();
    document.execCommand('paste');
    var text = ta.val();
    ta.blur();
    ta.remove();
    return text;
}

Answer 8

В Chrome вы можете использовать copy('the text or variable etc'). Хотя это не кросс-браузер (а не работает во фрагменте? ), вы можете добавить его к другим ответам кросс-браузер.

Answer 9

Я собирался использовать clipboard.js, но у него нет мобильного решения (пока) ... поэтому я написал очень маленькую библиотеку:

https://github.com/ryanpcmcquen/cheval

При этом будет либо скопирован текст (Desktop / Android / Safari 10+), либо, по крайней мере, выделен текст (более старые версии iOS). Minified это чуть более 1 КБ. В настольном Safari (нажмите Ctrl + C для копирования. Вам также не нужно писать какой-либо JavaScript для его использования.

Answer 10

Обновление 2015: в настоящее время есть способ использовать document.execCommand для работы с буфером обмена. clipboard.js предоставляет кросс-браузерный способ работы с буфером обмена ( поддержка браузера )