web-dev-qa-db-fra.com

Copiez le texte sélectionné dans le presse-papiers SANS utiliser flash - doit être multi-navigateur

Je veux avoir un bouton qui sélectionne le texte dans un textarea et le copie dans le presse-papiers. Je n'arrive pas à trouver de solutions qui fonctionnent dans tous les navigateurs et n'utilisent pas le flash.

C'est sûrement faisable? Je l'ai vu partout, mais je suppose qu'ils utilisent le flash, ce que je veux vraiment éviter si possible car certaines personnes ne l'ont pas.

Voici ce que j'ai jusqu'à présent - il sélectionne simplement le texte:

function copyCode() {
  $("#output-code").focus();
  $("#output-code").select();
}

(L'accent n'est pas strictement nécessaire)

javascriptjquerycopyclipboard
53
Nick Brunt

execCommand ('copier')

Il existe une toute nouvelle option. Il s'agit d'un navigateur croisé mais cela prendra du temps jusqu'à ce que tout le monde ait mis à jour son navigateur.

Il fonctionne en utilisant la fonction document.execCommand('copy');. Avec cette fonction, vous copiez le texte sélectionné. Cela ne fonctionnera pas seulement avec textareas mais avec chaque texte sélectionné sur la page Web (comme dans span, p, div, etc.).

Disponible dans Internet Explorer 10+, Chrome 43+, Opera 29+ et Firefox 41+ (voir execCommand compatibilité ici) ).

Exemple

// Setup the variables
var textarea = document.getElementById("textarea");
var answer  = document.getElementById("copyAnswer");
var copy    = document.getElementById("copyBlock");
copy.addEventListener('click', function(e) {

   // Select some text (you could also create a range)
   textarea.select(); 

   // Use try & catch for unsupported browser
   try {

       // The important part (copy selected text)
       var ok = document.execCommand('copy');

       if (ok) answer.innerHTML = 'Copied!';
       else    answer.innerHTML = 'Unable to copy!';
   } catch (err) {
       answer.innerHTML = 'Unsupported Browser!';
   }
});
<textarea id="textarea" rows="6" cols="40">
Lorem ipsum dolor sit amet, eamsemper maiestatis no.
</textarea><br/>

<button id="copyBlock">Click to copy</button> <span id="copyAnswer"></span>
62
arcs

Vous devez utiliser le complément Flash que vous ne souhaitez pas utiliser pour copier automatiquement du texte dans le presse-papiers du client. Un site Web modifiant automatiquement le presse-papiers du client sans l'aide de composants active-x est un problème de sécurité. Notez que les composants Active-X sont des programmes qui s'exécutent sur la machine de l'utilisateur et, techniquement, nécessitent l'installation de l'autorisation de l'utilisateur. Étant donné que le Presse-papiers est un composant du système d'exploitation, sachez que les navigateurs Web ne permettent pas aux sites Web de le détourner par défaut.

Si l'utilisateur n'a pas Flash, Flash désactivé ou Active-X désactivé, alors il ou elle est probablement paranoïaque à propos de la sécurité et ne veut pas que vous jouiez avec son clavier de toute façon. À ce stade, l'utilisateur serait habitué à ne pas avoir beaucoup de fonctionnalités automatiques ou basées sur des scripts dans les sites Web. Il est préférable de ne pas essayer de défier ouvertement les souhaits de l'utilisateur final.

Veuillez vous référer aux liens Stack Overflow suivants:

  1. Comment copier dans le presse-papiers en JavaScript?
  2. Détection Flash Cross Browser en Javascript

La réponse ultime est d'utiliser Zero Clipboard, qui est une bibliothèque qui utilise un petit film Flash invisible et JavaScript pour utiliser les fonctionnalités du presse-papiers comme vous le souhaitez. La bibliothèque est disponible ici: https://github.com/zeroclipboard/zeroclipboard Le deuxième lien montre comment détecter si Flash est désactivé ou non installé, ce qui vous permet d'afficher un message d'avertissement comme vous le feriez pour JavaScript.

18
Devin Burke

Maintenant, nous avons Clipboard.js par @zenorocha

Pour l'utiliser, téléchargez et appelez le script sur votre page.html (ou installez avec bower ou npm)

<script src="path_to_script/clipboard.min.js"></script>

Instanciez un nouveau déclencheur sur votre script.js

new Clipboard('.trigger');

Et allez-y pour voir quelques exemples d'utilisation: http://zenorocha.github.io/clipboard.js/#usage

9
Gabriel Gularte
function copyTextToClipboard(text) {
    var textArea = document.createElement("textarea");
    textArea.style.position = 'fixed';
    textArea.style.top = 0;
    textArea.style.left = 0;  
    textArea.style.width = '2em';
    textArea.style.height = '2em'; 
    textArea.style.padding = 0;  
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';   
    textArea.style.background = 'transparent';
    textArea.value = text;
    textArea.id = 'ta';
    document.body.appendChild(textArea);
    //textArea.select();
    var range = document.createRange();
    range.selectNode(textArea);
    textArea.select();
    window.getSelection().addRange(range);
    try {
        var successful = document.execCommand('copy');
    } catch (err) {
         alert('Oops, unable to copy');
    }
    document.body.removeChild(textArea);
    return successful;
}

J'espère que ceci est utile

7
Iyappan

Il s'agit d'une réponse assez tardive, mais pour ceux qui recherchent à l'avenir et qui ont du mal à implémenter l'événement execCommand ('copie') pour fonctionner à la fois sur les appareils de bureau et mobiles.

Cross browser, Mobile friendly et Pas besoin d'avoir des sources ou des programmes extérieurs

function CopyString(){
    var StringToCopyElement = document.getElementById('YourId');
    StringToCopyElement.select();

    if(document.execCommand('copy')){
        StringToCopyElement.blur();     
    }else{
        CopyStringMobile();
    }
}

function CopyStringMobile(){
    document.getElementById("YourId").selectionStart = 0;
    document.getElementById("YourId").selectionEnd = 999;
    document.execCommand('copy');

    if (window.getSelection) {
      if (window.getSelection().empty) {  // Chrome
        window.getSelection().empty();
      } else if (window.getSelection().removeAllRanges) {  // Firefox
        window.getSelection().removeAllRanges();
      }
    } else if (document.selection) {  // IE?
      document.selection.empty();
    }
}

Définissez la fonction CopyString () sur un événement de clic sur tout ce que vous cherchez à déclencher l'événement. Il est disponible pour être utilisé sur les systèmes d'exploitation mobiles et de bureau.

Explication

Vous devez avoir deux façons différentes de sélectionner la chaîne à copier, car à partir d'aujourd'hui, la méthode pour le faire via le bureau ne fonctionnera pas pour les appareils mobiles. J'ai une fonction if then pour attraper si la méthode de bureau a fonctionné et sinon, pour tirer le code qui fonctionnera pour un appareil mobile. Cette méthode ne nécessite aucun téléchargement ni lien. Les deux méthodes mettent en surbrillance le texte que vous cherchez à copier, puis lance la commande de copie dans votre presse-papiers, suivie de la désélection de la chaîne que vous essayez de copier. Vous pouvez mélanger le code à votre guise, mais c'est la façon de le faire.

1
MattOlivos