Скопіюйте / покладіть текст у буфер обміну за допомогою FireFox, Safari та Chrome

В Internet Explorer я можу використовувати об’єкт clipboardData для доступу до буфера обміну. Як я можу це зробити у FireFox, Safari та / або Chrome?

Зараз існує спосіб легко зробити це в більшості сучасних браузерів за допомогою

document.execCommand('copy');

Це скопіює вибраний текст. Ви можете вибрати текстове поле або поле введення, використовуючи

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

Щоб непомітно скопіювати текст, ви можете швидко створити 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/ ( і так це кеш Google )

Інтернетні електронні таблиці підключіть події 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. Ось рішення, яке працює з новим флеш-програвачем:

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

як усі говорили, з міркувань безпеки за замовчуванням вимкнено. вище посилання показує інструкції, як його ввімкнути (відредагувавши про: 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 в Clippy для моїх потреб, простий кнопки флеш-додатків. Працює чудово, якщо стилістиці не потрібен і задоволений тим, що заздалегідь вставити те, що потрібно вставити на сервер.

Невелике вдосконалення рішення Flash - це виявлення для Flash 10 за допомогою swfobject:

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

а потім, якщо він відображається як спалах 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);

}

Якщо ви підтримуєте флеш, ви можете використовувати 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)

Ви можете скористатися текстом та URL-адресом DataFormat для getData та setData.

І щоб видалити дані:

Ви можете використовувати файл, HTML, зображення, текст та URL-адресу DataFormat. PS: Вам потрібно використовувати window.clipboardData.clearData (DataFormat);

А для інших, які не підтримують window.clipboardData та флеш-файли SWF, ви також можете використовувати клавішу управління + клавішу c на клавіатурі для windows та для mac, її команда + c

З коду аддона:

Якщо хтось шукав, як це зробити з хромованого коду, ви можете використовувати інтерфейс 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
    };
})();