web-dev-qa-db-fra.com

Cliquez sur le bouton copier dans le presse-papier à l'aide de jQuery

Comment copier le texte d'une div dans le presse-papier? J'ai un div et ai besoin d'ajouter un lien qui ajoutera le texte au presse-papiers. Y a-t-il une solution pour cela?

<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text">copy Text</a>

Après avoir cliqué sur Copier le texte, j'ai appuyé sur Ctrl + V, il doit être collé.

jqueryhtmlcss
381
Dishan TD

Éditer depuis 2016

À partir de 2016, vous pouvez désormais copier du texte dans le presse-papiers dans la plupart des navigateurs, car la plupart des navigateurs ont la possibilité de copier par programme une sélection de texte dans le presse-papiers à l'aide de document.execCommand("copy") qui fonctionne à partir d'une sélection.

Comme pour d'autres actions dans un navigateur (comme ouvrir une nouvelle fenêtre), la copie dans le presse-papier ne peut être effectuée que par une action utilisateur spécifique (comme un clic de souris). Par exemple, cela ne peut pas être fait via une minuterie.

Voici un exemple de code:

document.getElementById("copyButton").addEventListener("click", function() {
    copyToClipboard(document.getElementById("copyTarget"));
});

function copyToClipboard(elem) {
          // create hidden text element, if it doesn't already exist
    var targetId = "_hiddenCopyText_";
    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
    var origSelectionStart, origSelectionEnd;
    if (isInput) {
        // can just use the original source element for the selection and copy
        target = elem;
        origSelectionStart = elem.selectionStart;
        origSelectionEnd = elem.selectionEnd;
    } else {
        // must use a temporary form element for the selection and copy
        target = document.getElementById(targetId);
        if (!target) {
            var target = document.createElement("textarea");
            target.style.position = "absolute";
            target.style.left = "-9999px";
            target.style.top = "0";
            target.id = targetId;
            document.body.appendChild(target);
        }
        target.textContent = elem.textContent;
    }
    // select the content
    var currentFocus = document.activeElement;
    target.focus();
    target.setSelectionRange(0, target.value.length);
    
    // copy the selection
    var succeed;
    try {
          succeed = document.execCommand("copy");
    } catch(e) {
        succeed = false;
    }
    // restore original focus
    if (currentFocus && typeof currentFocus.focus === "function") {
        currentFocus.focus();
    }
    
    if (isInput) {
        // restore prior selection
        elem.setSelectionRange(origSelectionStart, origSelectionEnd);
    } else {
        // clear temporary content
        target.textContent = "";
    }
    return succeed;
}
input {
  width: 400px;
}
<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">

Voici une démo un peu plus avancée: https://jsfiddle.net/jfriend00/v9g1x0o6/

Et, vous pouvez également obtenir une bibliothèque pré-construite qui le fait pour vous avec clipboard.js .

Ancien, partie historique de la réponse

La copie directe dans le Presse-papiers via JavaScript n'est pas autorisée par les navigateurs modernes pour des raisons de sécurité. La solution la plus courante consiste à utiliser une fonctionnalité Flash pour la copie dans le Presse-papiers, qui ne peut être déclenchée que par un clic direct de l'utilisateur.

Comme mentionné précédemment, ZeroClipboard est un ensemble de code populaire permettant de gérer l'objet Flash pour effectuer la copie. Je l'ai utilisé. Si Flash est installé sur le périphérique de navigation (ce qui exclut le mobile ou la tablette), cela fonctionne.

L’autre solution la plus courante consiste à placer le texte lié au presse-papier dans un champ de saisie, à déplacer le focus sur ce champ et à conseiller à l’utilisateur de cliquer sur Ctrl + C copier le texte.

Vous trouverez d'autres discussions sur le problème et des solutions de contournement possibles dans ces publications antérieures de Stack Overflow:

Ces questions demandant une alternative moderne à l’utilisation de Flash ont reçu beaucoup de votes positifs et pas de réponse avec une solution (probablement parce qu’il n’en existe pas):

Internet Explorer et Firefox avaient des API non standard pour accéder au presse-papiers, mais leurs versions les plus modernes ont déconseillé ces méthodes (probablement pour des raisons de sécurité).

Il y a un effort de normalisation naissant pour essayer de trouver un moyen "sûr" de résoudre les problèmes de presse-papiers les plus courants (nécessitant probablement une action spécifique de la part de l'utilisateur, telle que la solution Flash l'exige), peut être partiellement implémenté dans les dernières versions de Firefox et Chrome, mais je ne l’ai pas encore confirmé.

428
jfriend00

Il existe une autre méthode non Flash (hormis la API Clipboard mentionnée dans réponse de jfriend00 ). Vous devez sélectionner le texte, puis exécuter la commande copy pour copier dans le Presse-papiers le texte actuellement sélectionné sur la page.

Par exemple, cette fonction copiera le contenu de l'élément passé dans le presse-papiers (mis à jour avec la suggestion dans les commentaires de PointZeroTwo ):

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

Voilà comment cela fonctionne:

  1. Crée un champ de texte masqué temporaire.
  2. Copie le contenu de l'élément dans ce champ de texte.
  3. Sélectionne le contenu du champ de texte.
  4. Exécute la copie de commande comme suit: document.execCommand("copy").
  5. Supprime le champ de texte temporaire.

Vous pouvez voir une démo rapide ici:

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

Le problème principal est que toutes les navigateurs pris en charge cette fonctionnalité pour le moment, mais vous pouvez l'utiliser pour les principales à partir de:

  • Chrome 43
  • Internet Explorer 10
  • Firefox 41
  • Safari 10

Mise à jour 1: Ceci peut également être réalisé avec une solution JavaScript pure (pas de jQuery):

function copyToClipboard(elementId) {

  // Create a "hidden" input
  var aux = document.createElement("input");

  // Assign it the value of the specified element
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Append it to the body
  document.body.appendChild(aux);

  // Highlight its content
  aux.select();

  // Copy the highlighted text
  document.execCommand("copy");

  // Remove it from the body
  document.body.removeChild(aux);

}
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

Notez que nous passons l'identifiant sans le # maintenant.

Comme madzohan } _ signalé dans les commentaires ci-dessous, il existe dans certains cas un problème étrange avec la version 64 bits de Google Chrome (exécution du fichier localement). Ce problème semble être résolu avec la solution ci-dessus non-jQuery.

Madzohan a essayé dans Safari et la solution a fonctionné, mais en utilisant document.execCommand('SelectAll') au lieu d’utiliser .select() (comme spécifié dans le chat et dans les commentaires ci-dessous).

Comme PointZeroTwo indique dans les commentaires , le code pourrait être amélioré afin de renvoyer un résultat de succès/échec. Vous pouvez voir une démo sur this jsFiddle .

UPDATE: COPIE CONSERVATION DU FORMAT DE TEXTE

En tant que utilisateur indiqué dans la version espagnole de StackOverflow , les solutions répertoriées ci-dessus fonctionnent parfaitement si vous souhaitez copier le contenu d'un élément à la lettre, mais elles ne fonctionnent pas très bien si vous souhaitez coller texte copié avec le format (comme il est copié dans un input type="text", le format est "perdu").

Une solution pour cela serait de copier dans un contenu éditable div et de le copier ensuite à l'aide de execCommand d'une manière similaire. Voici un exemple - cliquez sur le bouton Copier puis collez-le dans le champ modifiable ci-dessous:

function copy(element_id){
  var aux = document.createElement("div");
  aux.setAttribute("contentEditable", true);
  aux.innerHTML = document.getElementById(element_id).innerHTML;
  aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); 
  document.body.appendChild(aux);
  aux.focus();
  document.execCommand("copy");
  document.body.removeChild(aux);
}
#target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button> 

<div id="target" contentEditable="true"></div>

Et dans jQuery, ce serait comme ça:

function copy(selector){
  var $temp = $("<div>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
       .html($(selector).html()).select()
       .on("focus", function() { document.execCommand('selectAll',false,null) })
       .focus();
  document.execCommand("copy");
  $temp.remove();
}
#target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button> 

<div id="target" contentEditable="true"></div>

517
Alvaro Montoro

clipboard.js est un utilitaire Nice qui permet de copier du texte ou des données HTML dans le presse-papiers sans utiliser Flash. C'est très facile à utiliser. incluez simplement le .js et utilisez quelque chose comme ceci:

<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 est aussi sur GitHub .

Éditer le 15 janvier 2016: La réponse principale était a été modifiée aujourd'hui pour faire référence à la même API dans ma réponse publiée en août 2015. Le texte précédent indiquait aux utilisateurs d'utiliser ZeroClipboard. Je veux juste être clair sur le fait que je n’ai pas tiré cela de la réponse de jfriend00, mais plutôt l’inverse. 

34
a coder

Avec sauts de ligne (extension de la réponse d'Alvaro Montoro)  

var ClipboardHelper = {

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

ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());
10
David from Studio.201

Encore mieux, sans flash ni autre exigence: clipboard.js . Tout ce que vous avez à faire est d’ajouter data-clipboard-target="#toCopyElement" à n’importe quel bouton, de l’initialiser new Clipboard('.btn'); et il copiera le contenu de DOM avec id toCopyElement dans le presse-papiers. Ceci est un extrait qui copie le texte fourni dans votre question via un lien.

Une limite cependant est que cela ne fonctionne pas sur safari, mais sur tous les autres navigateurs, y compris les navigateurs mobiles, car il n’utilise pas de flash.

$(function(){
  new Clipboard('.copy-text');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

<p id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text" data-clipboard-target="#content" href="#">copy Text</a>

7
Amgad

La simplicité est la sophistication ultime. 
Si vous ne voulez pas que le texte à copier soit visible:

jQuery:

$('button.copyButton').click(function(){
    $(this).siblings('input.linkToCopy').select();      
    document.execCommand("copy");
});

HTML: 

<button class="copyButton">click here to copy</button>
<input class="linkToCopy" value="TEXT TO COPY"
style="position: absolute; z-index: -999; opacity: 0;"><input>
6
Nadav
<div class="form-group">
    <label class="font-normal MyText">MyText to copy</label>&nbsp;
    <button type="button" class="btn btn-default btn-xs btnCopy" data="MyText">Copy</button>
</div>


$(".btnCopy").click(function () {
        var element = $(this).attr("data");
        copyToClipboard($('.' + element));
  });

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}
4
Nayan Hodar
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="css/index.css" rel="stylesheet" />
    <script src="js/jquery-2.1.4.min.js"></script>
    <script>
        function copy()
        {
            try
            {
                $('#txt').select();
                document.execCommand('copy');
            }
            catch(e)
            {
                alert(e);
            }
        }
    </script>
</head>
<body>
    <h4 align="center">Copy your code</h4>
    <textarea id="txt" style="width:100%;height:300px;"></textarea>
    <br /><br /><br />
    <div align="center"><span class="btn-md" onclick="copy();">copy</span></div>
</body>
</html>
4
Ujjwal Kumar Gupta

C'est une méthode simple pour copier le contenu

 <div id="content"> Lorepm ispum </div>
 <button class="copy" title="content">Copy Sorce</button>

function SelectContent(element) {
                        var doc = document
                            , text = doc.getElementById(element)
                            , range, selection
                        ;    
                        if (doc.body.createTextRange) {
                            range = document.body.createTextRange();
                            range.moveToElementText(text);
                            range.select();
                        } else if (window.getSelection) {
                            selection = window.getSelection();        
                            range = document.createRange();
                            range.selectNodeContents(text);
                            selection.removeAllRanges();
                            selection.addRange(range);

                        }
                         document.execCommand('Copy');
                    }
                    $(".copy").click(function(){

                         SelectContent( $(this).attr('title'));
                    });
4
Umer Farook

Vous pouvez utiliser ce code pour copier une valeur d'entrée dans une page du Presse-papiers en cliquant sur un bouton.

C'est html

<input type="text" value="xxx" id="link" class="span12" />
<button type="button" class="btn btn-info btn-sm" onclick="copyToClipboard('#link')">
    Copy Input Value
</button>

Ensuite, pour ce code HTML, nous devons utiliser ce code JQuery

function copyToClipboard(element) {
    $(element).select();
    document.execCommand("copy");
}

C'est la solution la plus simple pour cette question

3
keivan kashani

vous pouvez simplement utiliser cette librairie pour réaliser facilement l'objectif de copie!

https://clipboardjs.com/

Copier du texte dans le presse-papiers ne devrait pas être difficile. Cela ne devrait pas nécessiter des dizaines d'étapes à configurer ou des centaines de Ko à charger. Mais la plupart de tout cela, il ne devrait pas dépendre de Flash ou de tout framework gonflé.

C'est pourquoi clipboard.js existe.

ou

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

La bibliothèque ZeroClipboard offre un moyen simple de copier du texte dans le fichier presse-papiers utilisant une animation invisible Flash et un code JavaScript interface.

3
xgqfrms

Le texte à copier est en saisie de texte, par exemple: <input type="text" id="copyText" name="copyText"> et, lorsque vous cliquez sur le bouton ci-dessus, le texte doit être copié dans le presse-papiers. Le bouton ressemble à ceci: <button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button>

<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
  moviePath: "ZeroClipboard.swf"
}); 
});

</script>

Pour les fichiers CDN

note: ZeroClipboard.swf et ZeroClipboard.js "devrait se trouver dans le même dossier que votre fichier utilisant cette fonctionnalité est, OR vous devez inclure comme nous incluons <script src=""></script> dans nos pages.

2
Sydney Buildings

jQuery solution simple.

Devrait être déclenché par le clic de l'utilisateur.

$("<textarea/>").appendTo("body").val(text).select().each(function () {
            document.execCommand('copy');
        }).remove();
2
holden321

vous pouvez copier un texte individuel en dehors du texte d'un élément HTML.

        var copyToClipboard = function (text) {
            var $txt = $('<textarea />');

            $txt.val(text)
                .css({ width: "1px", height: "1px" })
                .appendTo('body');

            $txt.select();

            if (document.execCommand('copy')) {
                $txt.remove();
            }
        };
1
Alper Ebicoglu

Les deux vont comme un charme :),

JAVASCRIPT:

function CopyToClipboard(containerid) {
if (document.selection) { 
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select().createTextRange();
    document.execCommand("copy"); 

} else if (window.getSelection) {
    var range = document.createRange();
     range.selectNode(document.getElementById(containerid));
     window.getSelection().addRange(range);
     document.execCommand("copy");
     alert("text copied") 
}}

Aussi en html,

<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>

<div id="div1" >Text To Copy </div>

<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>

JQUERY: https://paulund.co.uk/jquery-copy-clipboard

1
harshal lonare

code html ici

    <input id="result" style="width:300px"/>some example text
    <button onclick="copyToClipboard('result')">Copy P1</button>
    <input type="text" style="width:400px" placeholder="Paste here for test" />

JS CODE:

     function copyToClipboard(elementId) {

                      // Create a "hidden" input
                      var aux = document.createElement("input");

                      aux.setAttribute("value", document.getElementById(elementId).value);
                      // Append it to the body
                      document.body.appendChild(aux);
                      // Highlight its content
                      aux.select();
                      // Copy the highlighted text
                      document.execCommand("copy");
                      // Remove it from the body
                      document.body.removeChild(aux);
                    }
1
li bing zhao

Clipboard-polyfill library est un polyfill pour l’API presse-papier asynchrone moderne basée sur Promise.

installer dans la CLI:

npm install clipboard-polyfill

importer en tant que presse-papiers dans un fichier JS

window.clipboard = require('clipboard-polyfill');

Exemple

Je l'utilise dans un paquet avec require("babel-polyfill"); et l'ai testé sur le chrome 67. Tout bon pour la production.

1
Yevgeniy Afanasyev

Il est très important que le champ de saisie n'ait pas display: none. Le navigateur ne sélectionnera pas le texte et ne sera donc pas copié. Utilisez opacity: 0 avec une largeur de 0px pour résoudre le problème.

1
Mark Lancaster

La plupart des réponses proposées créent un ou plusieurs éléments d’entrée cachés temporaires. Parce que la plupart des navigateurs supportent de nos jours l’édition de contenu div, je propose une solution qui ne crée pas d’élément (s) caché (s), ne conserve pas le formatage du texte et utilise une bibliothèque pure JavaScript ou jQuery. 

Voici une implémentation squelette minimaliste utilisant le plus petit nombre de lignes de codes que je pourrais penser:

//Pure javascript implementation:
document.getElementById("copyUsingPureJS").addEventListener("click", function() {
  copyUsingPureJS(document.getElementById("copyTarget"));
  alert("Text Copied to Clipboard Using Pure Javascript");
});

function copyUsingPureJS(element_id) {
  element_id.setAttribute("contentEditable", true);
  element_id.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
  element_id.focus();
  document.execCommand("copy");
  element_id.removeAttribute("contentEditable");
  
}

//Jquery:
$(document).ready(function() {
  $("#copyUsingJquery").click(function() {
    copyUsingJquery("#copyTarget");
  });
 

  function copyUsingJquery(element_id) {
    $(element_id).attr("contenteditable", true)
      .select()
      .on("focus", function() {
        document.execCommand('selectAll', false, null)
      })
      .focus()
    document.execCommand("Copy");
    $(element_id).removeAttr("contenteditable");
     alert("Text Copied to Clipboard Using jQuery");
  }
});
#copyTarget {
  width: 400px;
  height: 400px;
  border: 1px groove gray;
  color: navy;
  text-align: center;
  box-shadow: 0 4px 8px 0 gray;
}

#copyTarget h1 {
  color: blue;
}

#copyTarget h2 {
  color: red;
}

#copyTarget h3 {
  color: green;
}

#copyTarget h4 {
  color: cyan;
}

#copyTarget h5 {
  color: brown;
}

#copyTarget h6 {
  color: teal;
}

#pasteTarget {
  width: 400px;
  height: 400px;
  border: 1px inset skyblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copyTarget">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <strong>Preserve <em>formatting</em></strong>
  <br/>
</div>

<button id="copyUsingPureJS">Copy Using Pure JavaScript</button>
<button id="copyUsingJquery">Copy Using jQuery</button>
<br><br> Paste Here to See Result
<div id="pasteTarget" contenteditable="true"></div>

1
Jeffrey Kilelo