Copier / mettre du texte dans le presse-papiers avec FireFox, Safari et Chrome
https://stackoverflow.com/questions/127040
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Dans Internet Explorer, je peux utiliser l'objet clipboardData pour accéder au presse-papiers. Comment puis-je faire cela dans FireFox, Safari et / ou Chrome?
La solution
Il existe maintenant un moyen de le faire facilement dans la plupart des navigateurs modernes en utilisant
document.execCommand('copy');
Ceci copiera le texte actuellement sélectionné. Vous pouvez sélectionner une zone de texte ou un champ de saisie à l'aide de
document.getElementById('myText').select();
Pour copier du texte de manière invisible, vous pouvez générer rapidement un textArea, modifier le texte dans la zone, le sélectionner, le copier, puis supprimer le textArea. Dans la plupart des cas, textArea ne clignote même pas à l'écran.
Pour des raisons de sécurité, les navigateurs ne vous autorisent à copier que si un utilisateur effectue une action quelconque (c.-à-d. en cliquant sur un bouton). Une façon de procéder consiste à ajouter un événement onClick à un bouton HTML appelant une méthode qui copie le texte.
Un exemple complet ressemblerait à
<html>
<head>
<title>copy test</title>
</head>
<body>
<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>
<script>
function copier(){
document.getElementById('myText').select();
document.execCommand('copy');
}
</script>
</body>
</html>
Autres conseils
Pour des raisons de sécurité, Firefox ne vous permet pas de placer du texte dans le presse-papiers. Toutefois, une solution de contournement est disponible avec Flash.
function copyIntoClipboard(text) {
var flashId = 'flashId-HKxmj5';
/* Replace this with your clipboard.swf location */
var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';
if(!document.getElementById(flashId)) {
var div = document.createElement('div');
div.id = flashId;
document.body.appendChild(div);
}
document.getElementById(flashId).innerHTML = '';
var content = '<embed src="' +
clipboardSWF +
'" FlashVars="clipboard=' + encodeURIComponent(text) +
'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
document.getElementById(flashId).innerHTML = content;
}
Le seul inconvénient est que cela nécessite l'activation de Flash.
la source est actuellement morte: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559aa2 -cc6c-4ebf-9724-d23e8bc5ad8a / (il en va de même Google Cache / p>
Les feuilles de calcul en ligne accrochent les événements Ctrl + C, Ctrl + V, transfèrent le focus sur un contrôle TextArea masqué et définissent son contenu sur le nouveau contenu souhaité du presse-papiers à copier, ou le lisent une fois que l'événement est terminé.
voir aussi Est-il possible de lire le presse-papiers dans Firefox, Safari et Chrome en utilisant Javascript?
Nous sommes en été 2015, et avec tant de turbulences autour de Flash, j'ai pensé ajouter une nouvelle réponse à cette question qui évite totalement son utilisation.
clipboard.js est un utilitaire pratique qui permet de copier du texte ou des données HTML dans le presse-papiers. C'est très facile à utiliser, il suffit d'inclure le fichier .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>
clipboard.js est également présent sur GitHub
En 2017, vous pouvez le faire (en disant cela car ce fil a presque 9 ans!)
function copyStringToClipboard (string) {
function handler (event){
event.clipboardData.setData('text/plain', string);
event.preventDefault();
document.removeEventListener('copy', handler, true);
}
document.addEventListener('copy', handler, true);
document.execCommand('copy');
}
Et maintenant, copiez copyStringToClipboard ('Hello World')
Si vous avez remarqué la ligne setData et que vous vous demandez si vous pouvez définir différents types de données, la réponse est oui.
Firefox vous permet de stocker des données dans le Presse-papiers, mais pour des raisons de sécurité, celles-ci sont désactivées par défaut. Voir comment l'activer dans " Octroi de l'accès JavaScript dans le presse-papiers " de la base de connaissances Mozilla Firefox.
La solution proposée par amdfan est la meilleure solution si vous rencontrez de nombreux utilisateurs et que la configuration de leur navigateur n’est pas une option. Bien que vous puissiez vérifier si le Presse-papiers est disponible et fournir un lien pour modifier les paramètres, si les utilisateurs sont férus de technologie. L'éditeur JavaScript TinyMCE suit cette approche.
La fonction copyIntoClipboard () fonctionne pour Flash 9, mais elle semble interrompue par la sortie de Flash Player 10. Voici une solution qui fonctionne avec le nouveau lecteur Flash:
http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/
C'est une solution complexe, mais cela fonctionne.
Je dois dire qu'aucune de ces solutions vraiment ne fonctionne. J'ai essayé la solution de presse-papiers à partir de la réponse acceptée, et cela ne fonctionne pas avec Flash Player 10. J'ai également essayé ZeroClipboard, et j'en ai été très heureux pendant un certain temps.
Je l'utilise actuellement sur mon propre site ( http://www.blogtrog.com ). , mais j’ai remarqué des bugs étranges avec. Le fonctionnement de ZeroClipboard consiste à placer un objet flash invisible au-dessus d'un élément de votre page. J'ai constaté que si mon élément bouge (par exemple, lorsque l'utilisateur redimensionne la fenêtre et que les éléments sont correctement alignés), l'objet flash ZeroClipboard se détraque et ne le recouvre plus. Je suppose que c'est probablement toujours assis où il était à l'origine. Ils ont du code qui est censé arrêter cela, ou le coller à l'élément, mais cela ne semble pas bien fonctionner.
Alors ... dans la prochaine version de BlogTrog, je suppose que je ferai de même avec tous les autres surligneurs de code que j'ai vus à l'état sauvage et que je supprimerai le bouton Copier dans le presse-papiers. : - (
(J'ai remarqué que la copie vers le presse-papiers de dp.syntaxhiglighter est également endommagée.)
question bien trop ancienne, mais je n'ai vu cette réponse nulle part ...
Vérifiez ce lien:
http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard
comme tout le monde le dit, pour des raisons de sécurité, il est désactivé par défaut. le lien ci-dessus montre les instructions pour l'activer (en modifiant à propos de: config dans firefox ou le fichier user.js).
Heureusement, il existe un plug-in appelé "AllowClipboardHelper". ce qui facilite les choses en quelques clics seulement. Cependant, vous devez toujours indiquer aux visiteurs de votre site Web comment activer l'accès à Firefox.
J'ai utilisé le Clippy de Github pour mes besoins, un simple bouton Flash. Fonctionne très bien, si on n'a pas besoin de style et qu'on est content d'insérer au préalable ce qu'il faut coller sur le serveur.
Utilisez le document moderne document.execCommand (" copie ") et jQuery. Voir la réponse à cette pile de flux
var ClipboardHelper = { // as Object
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();
}};
Comment appeler:
ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());
// JQUERY DOCUMENT
;(function ( $, window, document, undefined ) {
var ClipboardHelper = {
copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
var $tempInput = $("<textarea>");
$("body").append($tempInput);
//todo prepare Text: remove double whitespaces, trim
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}
};
$(document).ready(function()
{
var $body=$('body');
$body.on('click', '*[data-copy-text-to-clipboard]', function(event)
{
var $btn=$(this);
var text=$btn.attr('data-copy-text-to-clipboard');
ClipboardHelper.copyText(text);
});
$body.on('click', '.js-copy-element-to-clipboard', function(event)
{
ClipboardHelper.copyElement($(this));
});
});
})( jQuery, window, document );<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span data-copy-text-to-clipboard=
"Hello
World">
Copy Text
</span>
<br><br>
<span class="js-copy-element-to-clipboard">
Hello
World
Element
</span>
Une légère amélioration de la solution Flash consiste à détecter le flash 10 à l’aide de swfobject:
http://code.google.com/p/swfobject/
et si cela indique Flash 10, essayez de charger un objet Shockwave en utilisant javascript. Shockwave peut aussi lire / écrire dans le presse-papiers (dans toutes les versions) en utilisant la commande copyToClipboard () dans le jargon.
De plus, ZeroClipboard a été mis à jour pour éviter le bogue mentionné à propos du défilement de page empêchant le film Flash d’être au bon endroit.
Depuis cette méthode " Nécessite " Il est pratique pour l'utilisateur de cliquer sur un bouton pour le copier. Aucune erreur de ce type ne se produit.
Si vous prenez en charge Flash, vous pouvez utiliser https://everyplay.com/assets/clipboard.swf et utilisez le texte flashvars pour définir le texte
https://everyplay.com/assets/clipboard.swf?text= Cela% 20Works
C’est celui que j’utilise pour copier et que vous pouvez définir comme extra si ne prend pas en charge ces options que vous pouvez utiliser:
Pour Internet Explorer: window.clipboardData.setData (DataFormat, Texte) et window.clipboardData.getData (DataFormat)
Vous pouvez utiliser le texte et l'URL du DataFormat pour obtenir Data et setData.
Et pour supprimer des données:
Vous pouvez utiliser les fichiers, HTML, Image, Texte et URL du DataFormat. PS: vous devez utiliser window.clipboardData.clearData (DataFormat);
Et pour d’autres qui ne supportent pas les fichiers flash window.clipboardData et swf, vous pouvez également utiliser les boutons Ctrl + C de votre clavier pour Windows et pour sa commande mac + c
À partir du code du complément:
Si quelqu'un d'autre cherchait une méthode d'utilisation à partir de code chrome, vous pouvez utiliser l'interface nsIClipboardHelper comme décrit ici: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard
Utilisez document.execCommand ('copie') . Pris en charge dans les dernières versions de Chrome , Firefox , Edge et Safari .
function copyText(text){
function selectElementText(element) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
}
var element = document.createElement('DIV');
element.textContent = text;
document.body.appendChild(element);
selectElementText(element);
document.execCommand('copy');
element.remove();
}
var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
copyText(txt.value);
})<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>
essayez de créer une variable globale de mémoire stockant la sélection, l’autre fonction pouvant alors accéder à la variable et effectuer un collage, par exemple ..
var memory = '';//outside the functions but within the script tag.
function moz_stringCopy(DOMEle,firstPos,secondPos) {
var copiedString = DOMEle.value.slice(firstPos, secondPos);
memory = copiedString;
}
function moz_stringPaste(DOMEle, newpos) {
DOMEle.value = DOMEle.value.slice(0,newpos) + memory + DOMEle.value.slice(newpos);
}
L'API Presse-papiers est conçue pour remplacer document.execCommand . Safari travaille toujours sur le support technique, vous devez donc prévoir un système de secours jusqu’à ce que les spécifications soient réglées et que Safari ait terminé la mise en œuvre.
const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
evt.preventDefault();
window.navigator.clipboard.writeText(
permalink.href
).then(() => {
output.textContent = 'Copied';
}, () => {
output.textContent = 'Not copied';
});
};<a href="https://stackoverflow.com/questions/127040/" rel="bookmark">Permalink</a>
<output></output>
Pour des raisons de sécurité, le Autorisations du presse-papier peut être nécessaire pour lire et écrire dans le presse-papier. Si l'extrait de code ne fonctionne pas sur SO, testez-le sur localhost ou sur un domaine de confiance.
