Mise à jour 2020 : cette solution utilise execCommand. Bien que cette fonctionnalité soit correcte au moment de la rédaction de cette réponse, elle est désormais considérée comme obsolète . Il fonctionnera toujours sur de nombreux navigateurs, mais son utilisation est déconseillée car le support peut être supprimé.
Il existe une autre méthode non Flash (en dehors de l' API Clipboard mentionnée dans la réponse de jfriend00 ). Vous devez sélectionner le texte, puis exécuter la commandecopy 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 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:
- Crée un champ de texte temporairement masqué.
- Copie le contenu de l'élément dans ce champ de texte.
- Sélectionne le contenu du champ de texte.
- Exécute la copie de commande comme:
document.execCommand("copy").
- 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 tous les navigateurs ne prennent pas 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
Mise à jour 1: Cela peut être réalisé également 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 transmettons l'id sans le # maintenant.
Comme madzohan l'a signalé dans les commentaires ci-dessous, il y a un problème étrange avec la version 64 bits de Google Chrome dans certains cas (en exécutant le fichier localement). Ce problème semble être résolu avec la solution non jQuery ci-dessus.
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 le souligne dans les commentaires , le code pourrait être amélioré afin de renvoyer un résultat de réussite / échec. Vous pouvez voir une démo sur ce jsFiddle .
MISE À JOUR: COPIE GARDANT LE FORMAT DE TEXTE
Comme un utilisateur l'a souligné 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 littéralement, mais elles ne fonctionnent pas si bien si vous souhaitez coller le texte copié au format (comme il est copié dans un input type="text", le format est "perdu").
Une solution pour cela serait de copier dans un contenu modifiable divpuis de le copier en utilisant le execCommandde la même manière. Voici un exemple - cliquez sur le bouton Copier puis collez-le dans la zone 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 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>