web-dev-qa-db-fra.com

Copier dans le presse-papier sans Flash

J'ai trouvé de nombreuses solutions pour copier dans le presse-papiers, mais toutes avec flash ou pour les sites Web. Je recherche une méthode de copie dans le presse-papiers automatiquement, sans flash et pour l'utilisateur, c'est pour les scripts utilisateurs et bien sûr pour plusieurs navigateurs.

javascriptjqueryclipboard
90
Black_Sun

Sans flash, ce n'est tout simplement pas possible dans la plupart des navigateurs. Le Presse-papiers de l'utilisateur est une ressource liée à la 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, les navigateurs, à juste titre, n’autorisent pas l’accès à Javascript (certains l’autorisent avec un avertissement indiquant que l’utilisateur a confirmé, ou avec du code Javascript signé, mais rien de tout cela n’est cross-browser).

31
Michael Borgwardt

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

La partie javascript de 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, indiquez ce que vous voulez copier dans 'METTRE LE TEXTE À COPIER ICI. PEUT ÊTRE UNE FONCTION. ' région. Fonctionne bien pour moi moi. Vous devez juste faire une combinaison CTRL + C. Le seul inconvénient est que vous allez avoir un textarea laid affiché dans votre site. Si vous utilisez le style = "display: none", la solution de copie ne fonctionnera pas.

25
Julio Saito

clipboard.js vient de sortir pour copier dans le presse-papier sans Flash

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

15
malditojavi

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=fr

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

10
Hovis Biddle

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

Voici comment écrire une fonction personnalisée pour le faire (testé dans chrome et firefox):

Voici le VIOLON qui montre comment vous pouvez faire cela.

Je vais aussi 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();
1
mrBorna

document.execCommand('copy') fera ce que vous voulez. Mais il n’existait pas d’exemples directement utilisables dans ce fil sans peine, 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')
0
odinho - Velmont