il existe une autre voie Non Flash (à l'exception de la API Presse-papiers mentionnée dans réponse de jfriend00 ). Vous devez sélectionner le texte, puis exécuter la commande copy copier dans le presse-papiers texte actuellement sélectionné dans la page.

par exemple, cette fonction va copier le contenu de l'élément passé dans le presse-papiers (mis à jour avec suggestion dans le commentaires de PointZeroTwo ):

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

C'est comme ça que ça marche:

1. crée un champ de texte caché temporaire.
2. Copie le contenu de l'élément le champ texte.
3. Sélectionne le contenu du champ de texte.
4. exécute la copie de commande comme: 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 principal problème est que pas tous les navigateurs prennent en charge cette fonctionnalité pour le moment, mais vous pouvez l'utiliser sur les principaux à partir de:

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

Maj 1: cela peut être réalisé aussi avec une solution JavaScript pure (no 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" />

remarquez que nous passons la carte d'identité sans le # maintenant.

comme madzohan rapporté dans les commentaires ci-dessous, il ya quelque problème étrange avec la version 64 bits de Google Chrome dans certains cas (l'exécution du fichier localement.) Cette question semble être réglée avec la solution non jQuery ci-dessus.

Madzohan essayé en 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 souligne dans les commentaires , le code pourrait être améliorée de sorte qu'il retournerait un succès/échec résultat. Vous pouvez voir une démo sur ce jsFiddle .

UPDATE: COPY KEEPING THE TEXT FORMAT

comme un utilisateur souligné dans la version espagnole de StackOverflow , les solutions énumérées ci-dessus fonctionnent parfaitement si vous voulez copier le contenu d'un élément littéralement, mais ils ne fonctionnent pas si grand si vous voulez coller le texte copié avec format (comme il est copié dans un input type="text" , le format est "perdu").

Une solution serait de copier un contenu modifiable div puis de le copier à l'aide de la execCommand une manière similaire. Ici, il y a un exemple - cliquez sur le bouton Copier et puis coller dans la boîte de contenu 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 en jQuery, ce serait comme ceci:

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>

bloc-notes.js est un utilitaire agréable qui permet de copier du texte ou des données HTML dans le presse-papiers sans utiliser Flash. Il est très facile à utiliser: il suffit d'inclure l' .js et d'utiliser 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>

bloc-notes.js est également sur GitHub .

Modifier le Jan 15, 2016: Le réponse sommet était édité aujourd'hui, pour faire référence à la même API dans ma réponse publié en août 2015. Dans le texte précédent, on demandait aux utilisateurs d'utiliser le tableau à zéros. Je veux juste être clair que je ne l'ai pas tiré de la réponse de jfriend00, plutôt l'inverse.

Avec des Sauts de Ligne (Extension de la Réponse de 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());

encore mieux approche sans flash ou toute autre exigence est bloc-notes.js . Tout ce que vous devez faire est d'ajouter data-clipboard-target="#toCopyElement" sur n'importe quel bouton, initialisez-le new Clipboard('.btn'); et il copiera le contenu du DOM avec l'id toCopyElement au bloc-notes. Il s'agit d'un extrait qui copie le texte fourni dans votre question via un lien.

une limitation cependant est qu'il ne fonctionne pas sur safari, mais il fonctionne sur tous les autres navigateurs, y compris les navigateurs mobiles comme il n'utilise pas 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>

c'est la méthode la plus 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'));
                    });

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

la simplicité est la sophistication ultime.

Si vous ne voulez pas que le texte à être Coppé 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>

<!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>

vous pouvez simplement utiliser cette lib pour réaliser facilement le but de la copie!

https://clipboardjs.com /

copier du texte dans le presse-papiers ne devrait pas être difficile. Il ne devrait pas exiger des dizaines d'étapes pour configurer ou des centaines de KBs à charger. Mais la plupart de tout ça, ça ne devrait pas dépendre de Flash ou de n'importe quel cadre gonflé.

C'est pour ça le bloc-notes.js existe.

ou

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org /

la bibliothèque ZeroClipboard fournit un moyen facile de copier le texte à la presse-papiers utilisant un film Invisible Adobe Flash et un JavaScript interface.

le texte à copier est en entrée de texte, comme: <input type="text" id="copyText" name="copyText"> et, sur le bouton Cliquez ci-dessus le texte doit être copié au bloc-notes,donc le bouton est comme: <button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button> votre script doit être comme:

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

</script>

pour les fichiers CDN

• (zeroclipboard.swf) :
• (zeroclipboard.js) :

note : ZeroClipboard.swf et ZeroClipboard.js "les fichiers doivent être dans le même dossier que votre fichier utilisant cette fonctionnalité est, ou vous devez inclure comme nous incluons <script src=""></script> sur nos pages.

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" />

CODE JS:

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

la plupart des réponses proposées créent un élément d'entrée caché supplémentaire temporaire. Parce que la plupart des navigateurs prennent aujourd'hui en charge le contenu div edit, je propose une solution qui ne crée pas d'élément(s) caché (s), préserve le formatage du texte et utilise JavaScript pur ou la bibliothèque jQuery.

Voici une implémentation squelettique minimaliste en utilisant le moins de lignes de codes possibles:

//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>

les Deux fonctionne 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

Presse-papiers-polyfill Bibliothèque est un polyfill pour la promesse moderne basée asynchrone presse-papiers API.

installer dans CLI:

npm install clipboard-polyfill 

importer comme presse-papiers dans le fichier JS

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

exemple

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

jQuery solution simple.

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

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

les Deux fonctionne comme un charme :),

1. 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>

2. JQUERY:

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