Kopiuj / wstaw tekst do schowka za pomocą FireFox, Safari i Chrome

W przeglądarce Internet Explorer mogę użyć obiektu clipboardData, aby uzyskać dostęp do schowka. Jak mogę to zrobić w FireFox, Safari i / lub Chrome?

Istnieje teraz sposób na łatwe zrobienie tego w większości nowoczesnych przeglądarek korzystających z

document.execCommand('copy');

Spowoduje to skopiowanie aktualnie zaznaczonego tekstu. Możesz wybrać pole tekstowe lub pole wejściowe za pomocą

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

Aby niewidocznie skopiować tekst, możesz szybko wygenerować textArea, zmodyfikować tekst w polu, zaznaczyć go, skopiować, a następnie usunąć textArea. W większości przypadków ten textArea nawet nie miga na ekranie.

Ze względów bezpieczeństwa przeglądarki pozwalają na kopiowanie tylko wtedy, gdy użytkownik wykona jakąś czynność (np. Kliknie przycisk). Jednym ze sposobów byłoby dodanie zdarzenia onClick do przycisku HTML, który wywołuje metodę kopiującą tekst.

Pełny przykład:

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

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

Ze względów bezpieczeństwa Firefox nie pozwala na umieszczanie tekstu w schowku. Istnieje jednak obejście problemu przy użyciu Flasha.

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

Jedyną wadą jest to, że wymaga to włączenia Flasha.

źródło jest obecnie martwe: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ ( a więc jest to pamięć podręczna Google )

Arkusze kalkulacyjne online przechwytują zdarzenia Ctrl + C, Ctrl + V i przenoszą fokus do ukrytej kontrolki TextArea i albo ustawiają jej zawartość na żądaną nową zawartość schowka w celu skopiowania, albo odczytują jej zawartość po zakończeniu zdarzenia w celu wklejenia.

zobacz także Czy można czytać schowek w przeglądarce Firefox, Safari i Chrome przy użyciu JavaScript?

Jest lato 2015 roku i przy tak dużym zamieszaniu wokół Flasha, pomyślałem, że dodam nową odpowiedź na to pytanie, która całkowicie unika jego użycia.

clipboard.js to przyjemne narzędzie, które umożliwia kopiowanie danych tekstowych lub html do schowka. Jest bardzo łatwy w użyciu, wystarczy dołączyć plik .js i użyć czegoś takiego:

<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 jest również w serwisie GitHub

W 2017 roku możesz to zrobić (mówiąc tak, bo ten wątek ma prawie 9 lat!)

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

A teraz do skopiowania copyStringToClipboard('Hello World')

Jeśli zauważyłeś tę setDatalinię i zastanawiałeś się, czy możesz ustawić różne typy danych, odpowiedź brzmi: tak.

Firefox pozwala na przechowywanie danych w schowku, ale ze względu na bezpieczeństwo jest domyślnie wyłączony. Zobacz, jak ją włączyć w sekcji „Udzielanie dostępu JavaScript do schowka” w bazie wiedzy Mozilla Firefox.

Rozwiązanie oferowane przez amdfan jest najlepsze, jeśli masz wielu użytkowników, a konfiguracja ich przeglądarki nie wchodzi w grę. Chociaż możesz sprawdzić, czy schowek jest dostępny i podać link do zmiany ustawień, jeśli użytkownicy są obeznani z technologią. Edytor JavaScript TinyMCE stosuje to podejście.

Funkcja copyIntoClipboard () działa dla Flash 9, ale wygląda na to, że została zepsuta przez wydanie Flash Playera 10. Oto rozwiązanie, które działa z nowym Flash Playerem:

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

To złożone rozwiązanie, ale działa.

Muszę powiedzieć, że żadne z tych rozwiązań tak naprawdę nie działa. Wypróbowałem rozwiązanie schowka z zaakceptowanej odpowiedzi i nie działa z Flash Playerem 10. Próbowałem również ZeroClipboard i przez chwilę byłem z niego bardzo zadowolony.

Obecnie używam go w mojej własnej witrynie ( http://www.blogtrog.com ), ale zauważyłem w nim dziwne błędy. Sposób działania ZeroClipboard polega na tym, że umieszcza niewidoczny obiekt flash na górze elementu na stronie. Zauważyłem, że jeśli mój element się porusza (np. Gdy użytkownik zmienia rozmiar okna, a ja mam rzeczy wyrównane do prawej), obiekt flash ZeroClipboard wyskakuje i nie zakrywa już obiektu. Podejrzewam, że prawdopodobnie nadal siedzi tam, gdzie był pierwotnie. Mają kod, który ma to zatrzymać lub ponownie połączyć z elementem, ale wydaje się, że nie działa dobrze.

Więc ... w następnej wersji BlogTrog, myślę, że podążę za wszystkimi innymi zakreślaczami kodu, które widziałem na wolności i usunę przycisk Kopiuj do schowka. :-(

(Zauważyłem, że kopia do schowka w dp.syntaxhiglighter jest teraz również zepsuta.)

zbyt stare pytanie, ale nigdzie nie widziałem tej odpowiedzi ...

Sprawdź ten link:

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

jak wszyscy mówili, ze względów bezpieczeństwa jest domyślnie wyłączony. łącze powyżej pokazuje instrukcje, jak go włączyć (edytując about: config w firefox lub user.js).

Na szczęście istnieje wtyczka o nazwie „AllowClipboardHelper”, która ułatwia sprawę za pomocą kilku kliknięć. jednak nadal musisz poinstruować odwiedzających witrynę, jak włączyć dostęp w przeglądarce Firefox.

Użyj nowoczesnych dokumentów document.execCommand („copy”) i jQuery. Zobacz tę odpowiedź na temat 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();
}};

Jak zadzwonić:

 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>

Użyłem Clippy Githuba do moich potrzeb, prostego przycisku Flash. Działa dobrze, jeśli nie potrzebujesz stylizacji i jest zadowolony z wcześniejszego wstawienia tego, co chcesz wkleić po stronie serwera.

Nieznacznym ulepszeniem rozwiązania Flash jest wykrywanie Flash 10 za pomocą swfobject:

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

a jeśli wyświetli się jako flash 10, spróbuj załadować obiekt Shockwave przy użyciu JavaScript. Shockwave może czytać / zapisywać w schowku (we wszystkich wersjach) również za pomocą polecenia copyToClipboard () w języku lingo.

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp współpracuje z Flash 10 i wszystkimi przeglądarkami obsługującymi Flash.

Zaktualizowano również ZeroClipboard, aby uniknąć omawianego błędu dotyczącego przewijania strony, który powoduje, że film Flash nie jest już we właściwym miejscu.

Ponieważ ta metoda wymaga od użytkownika kliknięcia przycisku w celu skopiowania, jest to wygoda dla użytkownika i nie dzieje się nic nikczemnego.

spróbuj utworzyć globalną zmienną pamięci przechowującą zaznaczenie, wtedy inna funkcja może uzyskać dostęp do zmiennej i na przykład wykonać wklejanie.

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

}

Jeśli obsługujesz Flash, możesz użyć https://everyplay.com/assets/clipboard.swf i użyć tekstu flashvars, aby ustawić tekst

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

To jest ten, którego używam do kopiowania i możesz ustawić jako dodatkowy, jeśli nie obsługuje tych opcji, których możesz użyć:

W przeglądarce Internet Explorer: window.clipboardData.setData (DataFormat, Text) i window.clipboardData.getData (DataFormat)

Możesz użyć tekstu i adresu URL DataFormat do getData i setData.

Aby usunąć dane:

Możesz użyć pliku DataFormat, HTML, obrazu, tekstu i adresu URL. PS: Musisz użyć window.clipboardData.clearData (DataFormat);

A dla innych, które nie obsługują window.clipboardData i plików flash swf, możesz również użyć przycisku Ctrl + C na klawiaturze dla systemu Windows i Mac jego polecenia + C

Z kodu dodatku:

W przypadku, gdy ktoś szukał, jak to zrobić z kodu chrome, możesz użyć interfejsu nsIClipboardHelper, jak opisano tutaj: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

Użyj document.execCommand('copy'). Wspierane w najnowszych wersjach Chrome, Firefox, Edge, i 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>

Interfejs API schowka został zaprojektowany w celu zastąpienia document.execCommand. Safari nadal pracuje nad wsparciem, więc powinieneś zapewnić rezerwę, dopóki specyfikacja nie zostanie ustalona, ​​a Safari nie zakończy wdrażania.

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>

Ze względów bezpieczeństwa Permissionsdo odczytu i zapisu ze schowka może być potrzebny schowek. Jeśli fragment nie działa na SO, daj mu szansę na localhostzaufaną domenę lub w inny sposób.

Opierając się na doskonałej odpowiedzi od @David ze Studio.201, działa to w Safari, FF i Chrome. Zapewnia również, że nie wystąpi miganie textareapo umieszczeniu go poza ekranem.

// ================================================================================
// 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
    };
})();