Copier dans le presse-papiers sans Flash

J'ai trouvé de nombreuses solutions pour copier dans le presse-papiers, mais elles sont toutes soit avec flash, soit côté sites Web. Je recherche une méthode de copie dans le presse-papier automatiquement, sans flash et côté utilisateur, c'est pour les scripts utilisateur et bien sûr pour les navigateurs croisés.

Sans flash, ce n'est tout simplement pas possible dans la plupart des navigateurs. Le presse-papiers de l'utilisateur est une ressource de sécurité car il peut contenir des éléments tels que des mots de passe ou des numéros de carte de crédit. Ainsi, à juste titre, les navigateurs n'autorisent pas l'accès Javascript (certains l'autorisent avec un avertissement indiquant que l'utilisateur a confirmé, ou avec un code Javascript signé, mais rien de tout cela n'est inter-navigateur).

J'avais essayé la solution flash et je n'aimais pas trop. Trop complexe et trop lent. Ce que j'ai fait, c'est créer une zone de texte, y mettre les données et utiliser le comportement "CTRL + C" du navigateur.

La partie javascript jQuery:

// catch the "ctrl" combination keydown
$.ctrl = function(key, callback, args) {
    $(document).keydown(function(e) {
        if(!args) args=[]; // IE barks when args is null
        if(e.keyCode == key && e.ctrlKey) {
            callback.apply(this, args);
            return false;
        }
    });
};

// put your data on the textarea and select all
var performCopy = function() {
    var textArea = $("#textArea1");
    textArea.text('PUT THE TEXT TO COPY HERE. CAN BE A FUNCTION.');
    textArea[0].focus();
    textArea[0].select();
};

// bind CTRL + C
$.ctrl('C'.charCodeAt(0), performCopy);

La partie HTML:
<textarea id="textArea1"></textarea>

Maintenant, mettez ce que vous voulez copier dans 'METTRE LE TEXTE À COPIER ICI. PEUT ÊTRE UNE FONCTION. '' zone. Fonctionne bien pour moi moi. Il vous suffit de créer une combinaison CTRL + C. Le seul inconvénient est que vous allez avoir une zone de texte laide affichée sur votre site. Si vous utilisez le style = "display: none", la solution de copie ne fonctionnera pas.

clipboard.js vient d'être publié pour copier dans le presse-papiers sans avoir besoin de Flash

Voyez-le en action ici> http://zenorocha.github.io/clipboard.js/#example-action

C'est enfin là!(Tant que vous ne supportez pas Safari ou IE8 ... -_-)

Vous pouvez désormais gérer les actions du presse-papiers sans Flash. Voici la documentation pertinente:

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en

https://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx#copy

^{En attendant avec impatience le support Xbrowser de l' API Clipboard ...}

IE ne demandera à l'utilisateur qu'une seule fois d'accéder au Presse-papiers.
Safari (5.1 au moment de l' écriture) ne prend pas en charge execCommanddecopy/cut

/**
 * CLIPBOARD
 * https://stackoverflow.com/a/33337109/383904
 */
const clip = e => {
  e.preventDefault();
  
  const cont = e.target.innerHTML;
  const area = document.createElement("textarea");
  
  area.value = e.target.innerHTML; // or use .textContent
  document.body.appendChild(area);
  area.select();
 
  if(document.execCommand('copy')) console.log("Copied to clipboard");
  else prompt("Copy to clipboard:\nSelect, Cmd+C, Enter", cont); // Saf, Other
  
  area.remove();
};


[...document.querySelectorAll(".clip")].forEach(el => 
  el.addEventListener("click", clip)
);

<a class="clip" href="#!">Click an item to copy</a><br>
<a class="clip" href="#!"><i>Lorem</i></a><br>
<a class="clip" href="#!"><b>IPSUM</b></a><br>

<textarea placeholder="Paste here to test"></textarea>

Tous les navigateurs (à l'exception de Firefox qui n'est capable de gérer que le type mime "plain/text"dans la mesure où j'ai testé) n'ont pas implémenté l' API Clipboard . Ie, en essayant de lire l'événement du presse-papiers dans Chrome à l'aide de

var clipboardEvent = new ClipboardEvent("copy", {
        dataType: "plain/text",
        data: "Text to be sent to clipboard"
});

jette: Uncaught TypeError: Constructeur illégal

La meilleure ressource de l' incroyable désordre qui se passe entre les navigateurs et le Presse-papiers peut être vue ici (caniuse.com) (→ Suivez les commentaires sous "Notes" ).
MDN dit que le support de base est "(OUI)" pour tous les navigateurs, ce qui est inexact car on s'attendrait au moins à ce que l'API fonctionne, du tout.

Vous pouvez utiliser un presse-papiers local sur la page HTML. Cela vous permet de copier / couper / coller du contenu DANS la page HTML, mais pas depuis / vers des applications tierces ou entre deux pages HTML.

Voici comment vous pouvez écrire une fonction personnalisée pour ce faire (testée dans Chrome et Firefox):

Voici le FIDDLE qui montre comment vous pouvez faire cela.

Je vais également coller le violon ici pour référence.

HTML

<p id="textToCopy">This is the text to be copied</p>
<input id="inputNode" type="text" placeholder="Copied text will be pasted here" /> <br/>

<a href="#" onclick="cb.copy()">copy</a>
<a href="#" onclick="cb.cut()">cut</a>
<a href="#" onclick="cb.paste()">paste</a>

JS

function Clipboard() {
    /* Here we're hardcoding the range of the copy
    and paste. Change to achieve desire behavior. You can
    get the range for a user selection using
    window.getSelection or document.selection on Opera*/
    this.oRange = document.createRange();
    var textNode = document.getElementById("textToCopy");
    var inputNode = document.getElementById("inputNode");
    this.oRange.setStart(textNode,0);
    this.oRange.setEndAfter(textNode);
    /* --------------------------------- */
}

Clipboard.prototype.copy = function() {
    this.oFragment= this.oRange.cloneContents();
};

Clipboard.prototype.cut = function() {
    this.oFragment = this.oRange.extractContents();
};

Clipboard.prototype.paste = function() {
    var cloneFragment=this.oFragment.cloneNode(true)
    inputNode.value = cloneFragment.textContent;
};

window.cb = new Clipboard();

document.execCommand('copy')fera ce que vous voulez. Mais il n'y avait pas d'exemples directement utilisables dans ce fil sans cruft, alors le voici:

var textNode = document.querySelector('p').firstChild
var range = document.createRange()
var sel = window.getSelection()

range.setStart(textNode, 0)
range.setEndAfter(textNode)
sel.removeAllRanges()
sel.addRange(range)
document.execCommand('copy')

Il n'y a pas moyen de contourner, vous devez utiliser le flash. Il existe un plugin JQuery appelé jquery.copy qui permet de copier-coller entre les navigateurs à l'aide d'un fichier flash (swf). Ceci est similaire au fonctionnement du surligneur de syntaxe sur mon blog.

Une fois que vous avez référencé le fichier jquery.copy.js, tout ce que vous avez à faire pour pousser les données dans le presse-papiers est d'exécuter ce qui suit:

$.copy("some text to copy");

Sympa et facile;)