Копировать / помещать текст в буфер обмена с помощью FireFox, Safari и Chrome

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

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

document.execCommand('copy');

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

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

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

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

Полный пример:

function copier(){
  document.getElementById('myText').select();
  document.execCommand('copy');
}

<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>

По соображениям безопасности 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/ ( и это так кеш гугла )

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

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

Сейчас лето 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

В 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строку и задаетесь вопросом, можете ли вы установить разные типы данных, ответ - да.

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

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

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

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

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

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

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

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

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

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

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

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

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

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

Используйте современные document.execCommand («копия») и jQuery. См. Этот ответ stackoverflow

var ClipboardHelper = { // as Object

copyElement: function ($element)
{
   this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
    var $tempInput =  $("<textarea>");
    $("body").append($tempInput);
    $tempInput.val(text).select();
    document.execCommand("copy");
    $tempInput.remove();
}};

Как позвонить:

 ClipboardHelper.copyText('Hello\nWorld');
 ClipboardHelper.copyElement($('body h1').first());

// JQUERY DOCUMENT
;(function ( $, window, document, undefined ) {
  
  var ClipboardHelper = {

    copyElement: function ($element)
    {
       this.copyText($element.text())
    },
    copyText:function(text) // Linebreaks with \n
    {
        var $tempInput =  $("<textarea>");
        $("body").append($tempInput);
      
        //todo prepare Text: remove double whitespaces, trim
        
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

    $(document).ready(function()
    {
         var $body=$('body');
         
        $body.on('click', '*[data-copy-text-to-clipboard]', function(event) 
        {
            var $btn=$(this);
            var text=$btn.attr('data-copy-text-to-clipboard');
            ClipboardHelper.copyText(text);
        });
      
        $body.on('click', '.js-copy-element-to-clipboard', function(event) 
        {
            ClipboardHelper.copyElement($(this));
        });

    });


})( jQuery, window, document );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span data-copy-text-to-clipboard=
"Hello
 World">
  Copy Text
</span>
<br><br>
<span class="js-copy-element-to-clipboard">
Hello
World 
Element
</span>

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

Небольшое улучшение решения для Flash заключается в обнаружении flash 10 с помощью swfobject:

http://code.google.com/p/swfobject/

а затем, если он отображается как flash 10, попробуйте загрузить объект Shockwave с помощью javascript. Shockwave может читать / записывать в буфер обмена (во всех версиях), а также с помощью команды copyToClipboard () на жаргоне.

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp работает с Flash 10 и всеми браузерами с поддержкой Flash.

Также ZeroClipboard был обновлен, чтобы избежать упомянутой ошибки при прокрутке страницы, из-за которой Flash-ролик больше не находится в нужном месте.

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

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

var memory = '';//outside the functions but within the script tag.

function moz_stringCopy(DOMEle,firstPos,secondPos) {

var copiedString = DOMEle.value.slice(firstPos, secondPos);
memory = copiedString;

}

function moz_stringPaste(DOMEle, newpos) {

    DOMEle.value = DOMEle.value.slice(0,newpos) + memory + DOMEle.value.slice(newpos);

}

Если вы поддерживаете flash, вы можете использовать https://everyplay.com/assets/clipboard.swf и использовать текст flashvars для установки текста.

https://everyplay.com/assets/clipboard.swf?text=It%20Works

Это тот, который я использую для копирования, и вы можете установить его как дополнительный, если он не поддерживает следующие параметры, которые вы можете использовать:

Для Internet Explorer: window.clipboardData.setData (DataFormat, Text) и window.clipboardData.getData (DataFormat)

Вы можете использовать DataFormat Text и Url для getData и setData.

И чтобы удалить данные:

Вы можете использовать DataFormat's File, HTML, Image, Text и URL. PS: вам нужно использовать window.clipboardData.clearData (DataFormat);

И для других, которые не поддерживают flash-файлы window.clipboardData и swf, вы также можете использовать кнопку control + c на клавиатуре для Windows, а для Mac - команду + c

Из кода аддона:

Если кто-то еще искал, как это сделать из кода Chrome, вы можете использовать интерфейс nsIClipboardHelper, как описано здесь: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

Используйте document.execCommand('copy'). Поддерживается в последних версиях Chrome, Firefox, Edgeи Safari.

function copyText(text){
  function selectElementText(element) {
    if (document.selection) {
      var range = document.body.createTextRange();
      range.moveToElementText(element);
      range.select();
    } else if (window.getSelection) {
      var range = document.createRange();
      range.selectNode(element);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    }
  }
  var element = document.createElement('DIV');
  element.textContent = text;
  document.body.appendChild(element);
  selectElementText(element);
  document.execCommand('copy');
  element.remove();
}


var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  copyText(txt.value);
})

<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>

Буфер обмена API предназначен для замены document.execCommand. Safari все еще работает над поддержкой, поэтому вам следует предоставить запасной вариант до тех пор, пока не будут согласованы спецификации и Safari не завершит реализацию.

const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
  evt.preventDefault();
  window.navigator.clipboard.writeText(
    permalink.href
  ).then(() => {
    output.textContent = 'Copied';
  }, () => {
    output.textContent = 'Not copied';
  });
};

<a href="/programming/127040/" rel="bookmark">Permalink</a>
<output></output>

По соображениям безопасности буфер обмена Permissionsможет потребоваться для чтения и записи из буфера обмена. Если фрагмент не работает на SO, попробуйте его localhostили другой доверенный домен.

Основываясь на отличном ответе @David из Studio.201, это работает в Safari, FF и Chrome. Это также гарантирует отсутствие мигания из- textareaза помещения его за пределы экрана.

// ================================================================================
// ClipboardClass
// ================================================================================
var ClipboardClass = (function() {


   function copyText(text) {
    // Create temp element off-screen to hold text.
        var tempElem = $('<textarea style="position: absolute; top: -8888px; left: -8888px">');
        $("body").append(tempElem);

        tempElem.val(text).select();
        document.execCommand("copy");
        tempElem.remove();
   }


    // ============================================================================
   // Class API
   // ============================================================================
    return {
        copyText: copyText
    };
})();