Comment copier le texte à l'intérieur d'une division dans le presse-papiers ? J'ai une division et j'ai besoin d'ajouter un lien qui ajoutera le texte dans le presse-papiers. Existe-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, puis j'appuie sur Ctrl + V, il doit être collé.
Il existe une autre méthode non Flash (en dehors de l'[API Presse-papiers][1] mentionnée dans la réponse de jfriend00's). Vous devez sélectionner le texte, puis [exécuter la commande copy
][3] 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 (mise à 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();
}
Voici comment cela fonctionne :
document.execCommand("copy" ;)
.Vous pouvez voir une démonstration 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][5] ne supportent pas cette fonctionnalité pour le moment, mais vous pouvez l'utiliser sur les principaux d'entre eux :
Mise à jour 1 : Ce résultat peut également être obtenu avec une solution purement JavaScript (sans 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 l'id sans le # maintenant.
Comme [madzohan][6] l'a signalé dans les commentaires ci-dessous, il existe 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 indiqué dans le chat et dans les commentaires ci-dessous).
Comme le souligne PointZeroTwo dans les commentaires, le code pourrait être amélioré de manière à renvoyer un résultat de type succès/échec. Vous pouvez voir une démo sur [ce jsFiddle][7].
Comme un [utilisateur l'a fait remarquer dans la version espagnole de StackOverflow][8], les solutions énumérées ci-dessus fonctionnent parfaitement si vous voulez copier le contenu d'un élément littéralement, mais elles ne fonctionnent pas si bien si vous voulez coller le 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 ensuite de le copier en utilisant la execCommand
de façon similaire. Voici un exemple - cliquez sur le bouton "copier" et collez ensuite dans la case modifiable par le contenu 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 ç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>
[1] : http://www.w3.org/TR/clipboard-apis/
[3] : https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
[5] : https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#Browser_Compatibility [6] : https://stackoverflow.com/users/3033586/madzohan [7] :
[8] : https://es.stackoverflow.com/q/64248/250Mise à jour en 2016
Depuis 2016, vous pouvez désormais copier du texte dans le presse-papiers dans la plupart des navigateurs, car ces derniers ont la possibilité de copier par programme une sélection de texte dans le presse-papiers en utilisant document.execCommand("copy" ;)
qui fonctionne à partir d'une sélection.
Comme pour d'autres actions dans un navigateur (comme l'ouverture d'une nouvelle fenêtre), la copie dans le presse-papiers ne peut être effectuée que par une action spécifique de l'utilisateur (comme un clic de souris). Par exemple, elle ne peut pas être effectuée par le biais d'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 :
Vous pouvez également obtenir une bibliothèque préconstruite qui fait cela pour vous avec [clipboard.js][1].
Vieille partie historique de la réponse
La copie directe dans le presse-papiers via JavaScript n'est autorisée par aucun navigateur moderne pour des raisons de sécurité. La solution la plus courante consiste à utiliser une fonction Flash pour copier dans le presse-papiers, qui ne peut être déclenchée que par un clic direct de l'utilisateur.
Comme nous l'avons déjà mentionné, [ZeroClipboard][2] 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 dispositif de navigation (ce qui exclut les mobiles et les tablettes), cela fonctionne.
La solution de contournement la plus courante consiste à placer le texte contenu dans le presse-papiers dans un champ de saisie, à déplacer le focus sur ce champ et à conseiller à l'utilisateur d'appuyer sur Ctrl + C pour copier le texte.
D'autres discussions sur le problème et les solutions de contournement possibles peuvent être trouvées dans ces messages antérieurs de Stack Overflow :
https://stackoverflow.com/questions/400212/how-to-copy-to-the-clipboard-in-javascript
https://stackoverflow.com/questions/1539641/how-to-copy-text-to-the-clients-clipboard-using-jquery
[Comment copier dans le presse-papiers sans Flash ?][3]
Ces questions demandant une alternative moderne à l'utilisation de Flash ont reçu beaucoup de votes positifs et aucune réponse avec une solution (probablement parce qu'il n'y en a pas) :
Internet Explorer et Firefox disposaient autrefois d'API non standard pour accéder au presse-papiers, mais leurs versions plus modernes ont déprécié ces méthodes (probablement pour des raisons de sécurité).
Il y a un [effort de normalisation naissant][4] 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 l'utilisateur comme la solution Flash), et il semble qu'il soit partiellement mis en œuvre dans les dernières versions de Firefox et de Chrome, mais je ne l'ai pas encore confirmé.
[1] : https://zenorocha.github.io/clipboard.js/ [2] : http://zeroclipboard.org/ [3] : http://www.quora.com/HTML5/How-can-you-copy-to-clipboard-without-Flash [4] : http://www.w3.org/TR/clipboard-apis/
Le texte à copier est dans une entrée de texte, comme : <input type="text" ; id="copyText" ; name="copyText">
et, lors d'un clic sur le bouton, le texte ci-dessus doit être copié dans le presse-papiers, donc le bouton est comme :<button type="submit" ; id="copy_button" ; data-clipboard-target='copyText'>Copy</button>
Votre script devrait être comme :
<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
moviePath: "ZeroClipboard.swf"
});
});
</script>
Pour les fichiers CDN
note : Les fichiers ZeroClipboard.swf
et ZeroClipboard.js
" ; doivent être dans le même dossier que votre fichier utilisant cette fonctionnalité, OU vous devez inclure comme nous incluons <script src=""></script>
sur nos pages.
[1] : https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.swf [2] : https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.Core.js