Copia / metti il ​​testo negli appunti con FireFox, Safari e Chrome

In Internet Explorer posso utilizzare l'oggetto clipboardData per accedere agli appunti. Come posso farlo in FireFox, Safari e / o Chrome?

Ora c'è un modo per farlo facilmente nella maggior parte dei browser moderni utilizzando

document.execCommand('copy');

Questo copierà il testo attualmente selezionato. È possibile selezionare una textArea o un campo di input utilizzando

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

Per copiare il testo in modo invisibile è possibile generare rapidamente una textArea, modificare il testo nella casella, selezionarlo, copiarlo e quindi eliminare textArea. Nella maggior parte dei casi questo textArea non lampeggia nemmeno sullo schermo.

Per motivi di sicurezza, i browser ti permetteranno di copiare solo se un utente esegue un qualche tipo di azione (ad esempio, facendo clic su un pulsante). Un modo per farlo sarebbe aggiungere un evento onClick a un pulsante html che chiama un metodo che copia il testo.

Un esempio completo:

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

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

Per motivi di sicurezza, Firefox non consente di inserire testo negli appunti. Tuttavia, è disponibile una soluzione alternativa utilizzando 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;
}

L'unico svantaggio è che questo richiede che Flash sia abilitato.

la fonte è attualmente morta: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ ( e così è la cache di Google )

I fogli di calcolo online agganciano gli eventi Ctrl + C, Ctrl + V e trasferiscono lo stato attivo a un controllo TextArea nascosto e ne impostano il contenuto sul nuovo contenuto degli appunti desiderato per copiarlo o leggerne il contenuto dopo che l'evento è terminato per incollare.

vedi anche È possibile leggere gli appunti in Firefox, Safari e Chrome utilizzando Javascript?

È l'estate 2015 e con così tanto tumulto che circonda Flash ho pensato di aggiungere una nuova risposta a questa domanda che ne evita del tutto l'uso.

clipboard.js è una bella utility che permette di copiare testo o dati html negli appunti. È molto facile da usare, basta includere il .js e usare qualcosa del genere:

<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 è anche su GitHub

Nel 2017 puoi farlo (dicendo questo perché questo thread ha quasi 9 anni!)

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

E ora da copiare copyStringToClipboard('Hello World')

Se hai notato la setDatalinea e ti sei chiesto se puoi impostare diversi tipi di dati, la risposta è sì.

Firefox consente di memorizzare i dati negli appunti, ma a causa di implicazioni per la sicurezza è disabilitato per impostazione predefinita. Scopri come abilitarlo in "Concessione dell'accesso JavaScript agli appunti" nella knowledge base di Mozilla Firefox.

La soluzione offerta da amdfan è la migliore se hai molti utenti e la configurazione del loro browser non è un'opzione. Sebbene sia possibile verificare se gli appunti sono disponibili e fornire un collegamento per modificare le impostazioni, se gli utenti sono esperti di tecnologia. L'editor JavaScript TinyMCE segue questo approccio.

La funzione copyIntoClipboard () funziona per Flash 9, ma sembra essere interrotta dal rilascio di Flash Player 10. Ecco una soluzione che funziona con il nuovo flash player:

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

È una soluzione complessa, ma funziona.

Devo dire che nessuna di queste soluzioni davvero funziona . Ho provato la soluzione degli appunti dalla risposta accettata e non funziona con Flash Player 10. Ho anche provato ZeroClipboard e per un po 'ne sono rimasto molto soddisfatto.

Attualmente lo sto utilizzando sul mio sito ( http://www.blogtrog.com ), ma ho notato strani bug con esso. Il modo in cui funziona ZeroClipboard è che mette un oggetto flash invisibile sopra un elemento della tua pagina. Ho scoperto che se il mio elemento si sposta (come quando l'utente ridimensiona la finestra e ho le cose allineate correttamente), l'oggetto flash ZeroClipboard esce di botto e non copre più l'oggetto. Sospetto che probabilmente sia ancora seduto dov'era originariamente. Hanno un codice che dovrebbe fermarlo o rimetterlo nell'elemento, ma non sembra funzionare bene.

Quindi ... nella prossima versione di BlogTrog, immagino che seguirò l'esempio con tutti gli altri evidenziatori di codice che ho visto in circolazione e rimuoverò il mio pulsante Copia negli Appunti. :-(

(Ho notato che anche la copia negli Appunti di dp.syntaxhiglighter è interrotta.)

domanda troppo vecchia ma non ho visto questa risposta da nessuna parte ...

Controlla questo link:

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

come tutti hanno detto, per motivi di sicurezza è disabilitato di default. il collegamento sopra mostra le istruzioni su come abilitarlo (modificando about: config in firefox o user.js).

Fortunatamente esiste un plugin chiamato "AllowClipboardHelper" che semplifica le cose con pochi clic. tuttavia devi comunque istruire i visitatori del tuo sito web su come abilitare l'accesso in Firefox.

Usa il moderno document.execCommand ("copy") e jQuery. Vedi questa risposta di 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();
}};

Come chiamare:

 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>

Ho usato Clippy di Github per le mie esigenze, semplice pulsante basato su Flash. Funziona bene, se uno non ha bisogno di uno stile ed è soddisfatto di inserire in anticipo cosa incollare sul lato server.

Un leggero miglioramento della soluzione Flash consiste nel rilevare per Flash 10 utilizzando swfobject:

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

e quindi se viene visualizzato come flash 10, prova a caricare un oggetto Shockwave usando javascript. Shockwave può leggere / scrivere negli appunti (in tutte le versioni) anche utilizzando il comando copyToClipboard () in gergo.

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp funziona con Flash 10 e tutti i browser abilitati per Flash.

Anche ZeroClipboard è stato aggiornato per evitare il bug menzionato sullo scorrimento della pagina che causava il non essere più nella posizione corretta del filmato Flash.

Poiché tale metodo "richiede" all'utente di fare clic su un pulsante per copiare, ciò è una comodità per l'utente e non sta accadendo nulla di nefasto.

prova a creare una variabile globale di memoria che memorizza la selezione, quindi l'altra funzione può accedere alla variabile e fare un incolla per esempio ..

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

}

Se supporti il ​​flash puoi utilizzare https://everyplay.com/assets/clipboard.swf e utilizzare il testo flashvars per impostare il testo

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

Questo è quello che uso per copiare e puoi impostare come extra se non supporta queste opzioni puoi usare:

Per Internet Explorer: window.clipboardData.setData (DataFormat, Text) e window.clipboardData.getData (DataFormat)

È possibile utilizzare Text e Url di DataFormat per getData e setData.

E per eliminare i dati:

È possibile utilizzare File, HTML, Immagine, Testo e URL di DataFormat. PS: è necessario utilizzare window.clipboardData.clearData (DataFormat);

E per altri che non supportano window.clipboardData e file flash swf puoi anche usare il tasto control + c sulla tastiera per Windows e per mac il suo comando + c

Dal codice addon:

Nel caso in cui qualcun altro stesse cercando come farlo dal codice chrome, puoi utilizzare l'interfaccia nsIClipboardHelper come descritto qui: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

Usa document.execCommand('copy'). Supportato nelle ultime versioni di Chrome, Firefox, Edgee 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>

L'API degli Appunti è progettata per sostituire document.execCommand. Safari sta ancora lavorando al supporto, quindi dovresti fornire un fallback fino a quando le specifiche non si stabiliscono e Safari termina l'implementazione.

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>

Per motivi di sicurezza Permissionspotrebbe essere necessario leggere e scrivere appunti dagli appunti. Se lo snippet non funziona su SO, provalo su localhostun dominio altrimenti affidabile.

Basandosi sull'eccellente risposta di @David di Studio.201, funziona in Safari, FF e Chrome. Assicura inoltre che non si verifichi alcun lampeggiamento textareaposizionandolo fuori dallo schermo.

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