Comment copier dans le presse-papiers en JavaScript?
Quel est le meilleur moyen de copier du texte dans le presse-papier? (multi-navigateur)
J'ai essayé:
function copyToClipboard(text) {
if (window.clipboardData) { // Internet Explorer
window.clipboardData.setData("Text", text);
} else {
unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
clipboardHelper.copyString(text);
}
}
mais dans Internet Explorer, cela donne une erreur de syntaxe. Dans Firefox, il est écrit unsafeWindow is not defined.
Un truc sympa sans flash: Comment Trello accède-t-il au presse-papier de l'utilisateur?
Vue d'ensemble
Il existe trois API de navigateur principales pour la copie dans le Presse-papiers:
- API Async Clipboard
[navigator.clipboard.writeText]- Partie axée sur le texte disponible dans Chrome 66 (mars 2018)
- L'accès est asynchrone et utilise Promesses JavaScript , peut être écrit pour que les invites de sécurité (si elles sont affichées) n'interrompent pas le JavaScript dans la page.
- Le texte peut être copié directement dans le presse-papiers à partir d'une variable.
- Uniquement pris en charge sur les pages servies via HTTPS.
- Dans Chrome, 66 pages sous des onglets actifs peuvent écrire dans le presse-papiers sans invite de permission.
document.execCommand('copy')- La plupart des navigateurs prennent en charge cette fonctionnalité à partir du ~ avril 2015 (voir Assistance des navigateurs ci-dessous).
- L’accès est synchrone, c’est-à-dire qu’il arrête JavaScript dans la page jusqu’à la fin, y compris l’affichage et l’interaction de l’utilisateur avec les invites de sécurité.
- Le texte est lu depuis le DOM et placé dans le presse-papiers.
- Pendant les tests, environ avril 2015, seul Internet Explorer était signalé comme affichant des invites d'autorisations lors de l'écriture dans le Presse-papiers.
- Remplacement de l'événement de copie
- Voir la documentation de l'API Presse-papiers sur Remplacement de l'événement de copie } _.
- Vous permet de modifier ce qui apparaît dans le Presse-papiers à partir de tout événement de copie. Vous pouvez également inclure d'autres formats de données que le texte brut.
- Non couvert ici car il ne répond pas directement à la question.
Notes de développement général
Ne vous attendez pas à ce que les commandes liées au presse-papiers fonctionnent pendant que vous testez du code dans la console. En règle générale, la page doit être active (API Async Clipboard) ou nécessite une interaction de l'utilisateur (par exemple, un clic de l'utilisateur) pour permettre à (document.execCommand('copy')) d'accéder au presse-papiers. Voir ci-dessous pour plus de détails.
Async + repli
En raison du niveau de prise en charge par le navigateur de la nouvelle API Async Clipboard, vous souhaiterez probablement recourir à la méthode document.execCommand('copy') pour obtenir une bonne couverture du navigateur.
Voici un exemple simple:
function fallbackCopyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>Notez que cet extrait ne fonctionne pas correctement dans l'aperçu intégré de Stack Overflow. Vous pouvez l'essayer ici: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors=1011 }
API Async Clipboard
- _ { Message d’annonce de Chrome 66 (mars 2018) } _
- Référence Async Clipboard API brouillon de documentation
Notez qu'il est possible de "demander une autorisation" et de tester l'accès au Presse-papiers via l'API d'autorisations de Chrome 66.
var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
document.execCommand ('copie')
Le reste de cet article décrit les nuances et les détails de l'API document.execCommand('copy').
Prise en charge du navigateur
La prise en charge de JavaScript document.execCommand('copy') a augmenté, voir les liens ci-dessous pour les mises à jour du navigateur:
- Internet Explorer 10+ (bien que ce document indique qu'un support a été fourni par Internet Explorer 5.5+).
- _ { Google Chrome 43+ (~ avril 2015) } _
- Mozilla Firefox 41+ (envoi ~ septembre 2015) } _
- _ { Opera 29+ (basé sur Chromium 42, ~ avril 2015) } _
Exemple simple
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.focus();
copyTextarea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});<p>
<button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
<textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>Exemple complexe: copier dans le presse-papier sans afficher les entrées
L'exemple simple ci-dessus fonctionne parfaitement s'il existe un élément textarea ou input visible à l'écran.
Dans certains cas, vous pouvez souhaiter copier du texte dans le presse-papiers sans afficher d'élément input/textarea. Voici un exemple de moyen de contourner ce problème (essentiellement insérer un élément, copier dans le presse-papiers, supprimer un élément):
Testé avec Google Chrome 44, Firefox 42.0a1 et Internet Explorer 11.0.8600.17814.
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
//
// *** This styling is an extra step which is likely not required. ***
//
// Why is it here? To ensure:
// 1. the element is able to have focus and selection.
// 2. if element was to flash render it has minimal visual impact.
// 3. less flakyness with selection and copying which **might** occur if
// the textarea element is not visible.
//
// The likelihood is the element won't even render, not even a
// flash, so some of these are just precautions. However in
// Internet Explorer the element is visible whilst the popup
// box asking the user for permission for the web page to
// copy to the clipboard.
//
// Place in top-left corner of screen regardless of scroll position.
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
// Ensure it has a small width and height. Setting to 1px / 1em
// doesn't work as this gives a negative w/h on some browsers.
textArea.style.width = '2em';
textArea.style.height = '2em';
// We don't need padding, reducing the size if it does flash render.
textArea.style.padding = 0;
// Clean up any borders.
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
// Avoid flash of white box if rendered for any reason.
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
document.body.removeChild(textArea);
}
var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
copyJaneBtn = document.querySelector('.js-copy-jane-btn');
copyBobBtn.addEventListener('click', function(event) {
copyTextToClipboard('Bob');
});
copyJaneBtn.addEventListener('click', function(event) {
copyTextToClipboard('Jane');
});<div style="display:inline-block; vertical-align:top;">
<button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
<button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
<textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
</textarea>
</div>Notes complémentaires
Ne fonctionne que si l'utilisateur effectue une action
Tous les appels document.execCommand('copy') doivent avoir lieu directement à la suite d’une action de l’utilisateur, par exemple. Cliquez sur gestionnaire d'événements. Ceci est une mesure pour éviter de jouer avec le presse-papiers de l'utilisateur lorsqu'il ne s'y attend pas.
Consultez le post Google Developers post ici pour plus d'informations.
API Presse-papiers
Notez que la spécification complète de l'API Clipboard est disponible à l'adresse suivante: https://w3c.github.io/clipboard-apis/
Est-ce pris en charge?
document.queryCommandSupported('copy')doit renvoyertruesi la commande "est prise en charge par le navigateur".- et
document.queryCommandEnabled('copy')returntruesi ledocument.execCommand('copy')réussit s'il est appelé maintenant. Vérifier que la commande a été appelée à partir d'un thread initié par l'utilisateur et que les autres exigences sont remplies.
Cependant, à titre d'exemple de problèmes de compatibilité de navigateur, Google Chrome d'avril à octobre 2015 n'a renvoyé que true à partir de document.queryCommandSupported('copy') si la commande a été appelée à partir d'un thread initié par l'utilisateur.
Notez les détails de compatibilité ci-dessous.
Détail de la compatibilité du navigateur
Tandis qu'un simple appel à document.execCommand('copy') encapsulé dans un bloc try/catch appelé à la suite d'un clic de l'utilisateur, vous obtiendrez le plus de compatibilité possible. Cependant, certaines conditions sont réunies:
Tout appel à document.execCommand, document.queryCommandSupported ou document.queryCommandEnabled doit être placé dans un bloc try/catch.
Les différentes implémentations et versions de navigateur génèrent différents types d'exceptions lorsqu'ils sont appelés au lieu de renvoyer false.
Différentes implémentations de navigateurs sont toujours en cours de traitement et les API Presse-papiers sont toujours en mode brouillon. Pensez donc à effectuer vos tests.
La copie automatique dans le presse-papier peut être dangereuse. Par conséquent, la plupart des navigateurs (sauf IE) rendent la tâche très difficile. Personnellement, j'utilise le truc simple suivant:
function copyToClipboard(text) {
window.Prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
L'utilisateur se voit présenter la boîte de dialogue Invite dans laquelle le texte à copier est déjà sélectionné. Maintenant, il suffit d'appuyer sur Ctrl+C et Enter (pour fermer la boîte) - et le tour est joué!
Maintenant, l'opération de copie du presse-papiers est SÉCURITAIRE, car l'utilisateur le fait manuellement (mais d'une manière assez simple). Bien sûr, fonctionne dans tous les navigateurs.
<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>
<script>
function copyToClipboard(text) {
window.Prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
</script>L'approche suivante fonctionne dans Chrome, Firefox, Internet Explorer et Edge, ainsi que dans les versions récentes de Safari (la prise en charge de la copie a été ajoutée dans la version 10, publiée en octobre 2016).
- Créez une zone de texte et définissez son contenu sur le texte que vous souhaitez copier dans le Presse-papiers.
- Ajoutez la zone de texte au DOM.
- Sélectionnez le texte dans la zone de texte.
- Appelez document.execCommand ("copy")
- Retirez la zone de texte du dom.
Remarque: vous ne verrez pas la zone de texte, car elle est ajoutée et supprimée dans le même appel synchrone de code Javascript.
Certaines choses à surveiller si vous implémentez ceci vous-même:
- Pour des raisons de sécurité, cela ne peut être appelé qu'à partir d'un gestionnaire d'événements, tel que click (comme pour l'ouverture de fenêtres).
- Internet Explorer affichera une boîte de dialogue d’autorisation lors de la première mise à jour du presse-papiers.
- IE et Edge défilent lorsque la zone de texte est active.
- execCommand () peut lancer dans certains cas.
- Les nouvelles lignes et les onglets peuvent être avalés sauf si vous utilisez une zone de texte. (La plupart des articles semblent recommander l'utilisation d'un div)
- La zone de texte sera visible tant que la boîte de dialogue IE sera affichée. Vous devrez soit le cacher, soit utiliser l’application clipboardData spécifique de IE.
- Dans IE, les administrateurs système peuvent désactiver l'API du presse-papier.
La fonction ci-dessous devrait traiter tous les problèmes suivants aussi proprement que possible. S'il vous plaît laissez un commentaire si vous trouvez des problèmes ou avez des suggestions pour l'améliorer.
// Copies a string to the clipboard. Must be called from within an
// event handler such as click. May return false if it failed, but
// this is not always possible. Browser support for Chrome 43+,
// Firefox 42+, Safari 10+, Edge and IE 10+.
// IE: The clipboard feature may be disabled by an administrator. By
// default a Prompt is shown the first time the clipboard is
// used (per session).
function copyToClipboard(text) {
if (window.clipboardData && window.clipboardData.setData) {
// IE specific code path to prevent textarea being shown while dialog is visible.
return clipboardData.setData("Text", text);
} else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
var textarea = document.createElement("textarea");
textarea.textContent = text;
textarea.style.position = "fixed"; // Prevent scrolling to bottom of page in MS Edge.
document.body.appendChild(textarea);
textarea.select();
try {
return document.execCommand("copy"); // Security exception may be thrown by some browsers.
} catch (ex) {
console.warn("Copy to clipboard failed.", ex);
return false;
} finally {
document.body.removeChild(textarea);
}
}
}
Si vous voulez une solution très simple (qui prend moins de 5 minutes à intégrer) et qui a l'air bien, alors Clippy est une bonne alternative aux solutions les plus complexes.
Il a été écrit par un co-fondateur de GitHub. Exemple de code d'intégration Flash ci-dessous:
<object
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
width="110"
height="14"
id="clippy">
<param name="movie" value="/flash/clippy.swf"/>
<param name="allowScriptAccess" value="always"/>
<param name="quality" value="high"/>
<param name="scale" value="noscale"/>
<param NAME="FlashVars" value="text=#{text}"/>
<param name="bgcolor" value="#{bgcolor}"/>
<embed
src="/flash/clippy.swf"
width="110"
height="14"
name="clippy"
quality="high"
allowScriptAccess="always"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer"
FlashVars="text=#{text}"
bgcolor="#{bgcolor}"/>
</object>
Pensez à remplacer #{text} par le texte que vous souhaitez copier et #{bgcolor} à une couleur.
La lecture et la modification du Presse-papiers à partir d’une page Web soulèvent des problèmes de sécurité et de confidentialité. Cependant, dans Internet Explorer, il est possible de le faire. J'ai trouvé cet extrait de exemple :
<script type="text/javascript">
function select_all(obj) {
var text_val=eval(obj);
text_val.focus();
text_val.select();
r = text_val.createTextRange();
if (!r.execCommand) return; // feature detection
r.execCommand('copy');
}
</script>
<input value="http://www.sajithmr.com"
onclick="select_all(this)" name="url" type="text" />J'ai récemment écrit un blog technique sur ce problème même (je travaille chez Lucidchart et nous avons récemment procédé à une refonte complète de notre presse-papiers).
Copier du texte brut dans le Presse-papiers est relativement simple, en supposant que vous souhaitiez le faire lors d’un événement de copie système (l’utilisateur appuie sur CtrlC ou utilise le menu du navigateur).
var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1
|| navigator.userAgent.toLowerCase().indexOf("trident") != -1);
document.addEventListener('copy', function(e) {
var textToPutOnClipboard = "This is some text";
if (isIe) {
window.clipboardData.setData('Text', textToPutOnClipboard);
} else {
e.clipboardData.setData('text/plain', textToPutOnClipboard);
}
e.preventDefault();
});
Il est beaucoup plus difficile de placer du texte dans le Presse-papiers pendant un événement de copie système. Il semble que certaines de ces autres réponses font référence à des moyens de le faire via Flash, qui est le seul moyen de le faire sur plusieurs navigateurs (pour autant que je sache).
Autre que cela, il y a quelques options sur une base de navigateur par navigateur.
C'est le plus simple dans IE, où vous pouvez accéder à l'objet clipboardData à tout moment à partir de JavaScript via:
window.clipboardData
(Cependant, lorsque vous tentez de le faire en dehors d'un événement système, couper, copier ou coller, IE invitera l'utilisateur à accorder l'autorisation du Presse-papiers de l'application Web.)
Dans Chrome, vous pouvez créer une extension Chrome qui vous donnera autorisations dans le presse-papiers (c'est ce que nous faisons pour Lucidchart). Ensuite, pour les utilisateurs avec votre extension installée, vous devrez simplement déclencher l'événement système vous-même:
document.execCommand('copy');
Il semble que Firefox a certaines options qui permettent aux utilisateurs d’accorder des autorisations à certains sites pour accéder au presse-papiers, mais je n’ai pas essayé personnellement l’une de ces options.
Voici mon point de vue sur celui-là ..
function copy(text) {
var input = document.createElement('input');
input.setAttribute('value', text);
document.body.appendChild(input);
input.select();
var result = document.execCommand('copy');
document.body.removeChild(input)
return result;
}
clipboard.js est un petit utilitaire non Flash 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 sur GitHub .
Note: Ceci est maintenant obsolète. Migrer vers ici .
ZeroClipboard est la meilleure solution multi-navigateurs que j'ai trouvée:
<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>
<script src="ZeroClipboard.js"></script>
<script>
var clip = new ZeroClipboard( document.getElementById('copy') );
</script>
Si vous avez besoin d'une prise en charge non-flash pour iOS, ajoutez simplement une solution de secours:
clip.on( 'noflash', function ( client, args ) {
$("#copy").click(function(){
var txt = $(this).attr('data-clipboard-text');
Prompt ("Copy link, then click OK.", txt);
});
});
Parmi les projets sur lesquels je travaille, un plugin de copie dans le presse-papier jQuery utilisant la bibliothèque Zero Clipboard .
Il est plus facile à utiliser que le plugin natif Zero Clipboard si vous êtes un utilisateur important de jQuery.
J'ai trouvé la solution suivante:
Sur la touche enfoncée, le gestionnaire crée la balise "pre". Nous définissons le contenu pour copier cette balise, puis effectuons une sélection sur cette balise et retournons la valeur true dans le gestionnaire. Ceci appelle le gestionnaire standard de chrome et copie le texte sélectionné.
Et si vous en avez besoin, vous pouvez définir le délai d'expiration de la fonction de restauration de la sélection précédente. Mon implémentation sur Mootools:
function EnybyClipboard() {
this.saveSelection = false;
this.callback = false;
this.pastedText = false;
this.restoreSelection = function() {
if (this.saveSelection) {
window.getSelection().removeAllRanges();
for (var i = 0; i < this.saveSelection.length; i++) {
window.getSelection().addRange(this.saveSelection[i]);
}
this.saveSelection = false;
}
};
this.copyText = function(text) {
var div = $('special_copy');
if (!div) {
div = new Element('pre', {
'id': 'special_copy',
'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
});
div.injectInside(document.body);
}
div.set('text', text);
if (document.createRange) {
var rng = document.createRange();
rng.selectNodeContents(div);
this.saveSelection = [];
var selection = window.getSelection();
for (var i = 0; i < selection.rangeCount; i++) {
this.saveSelection[i] = selection.getRangeAt(i);
}
window.getSelection().removeAllRanges();
window.getSelection().addRange(rng);
setTimeout(this.restoreSelection.bind(this), 100);
} else return alert('Copy not work. :(');
};
this.getPastedText = function() {
if (!this.pastedText) alert('Nothing to paste. :(');
return this.pastedText;
};
this.pasteText = function(callback) {
var div = $('special_paste');
if (!div) {
div = new Element('textarea', {
'id': 'special_paste',
'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
});
div.injectInside(document.body);
div.addEvent('keyup', function() {
if (this.callback) {
this.pastedText = $('special_paste').get('value');
this.callback.call(null, this.pastedText);
this.callback = false;
this.pastedText = false;
setTimeout(this.restoreSelection.bind(this), 100);
}
}.bind(this));
}
div.set('value', '');
if (document.createRange) {
var rng = document.createRange();
rng.selectNodeContents(div);
this.saveSelection = [];
var selection = window.getSelection();
for (var i = 0; i < selection.rangeCount; i++) {
this.saveSelection[i] = selection.getRangeAt(i);
}
window.getSelection().removeAllRanges();
window.getSelection().addRange(rng);
div.focus();
this.callback = callback;
} else return alert('Fail to paste. :(');
};
}
Usage:
enyby_clip = new EnybyClipboard(); //init
enyby_clip.copyText('some_text'); // place this in CTRL+C handler and return true;
enyby_clip.pasteText(function callback(pasted_text) {
alert(pasted_text);
}); // place this in CTRL+V handler and return true;
Sur coller, il crée une zone de texte et fonctionne de la même manière.
PS peut être cette solution peut être utilisée pour créer une solution entièrement multi-navigateur sans flash. Ses travaux en FF et Chrome.
Geesh, je ne sais pas pourquoi personne ne l'a encore signalé.
En 2018, voici comment vous pouvez y arriver:
async copySomething(text?) {
try {
const toCopy = text || location.href;
await navigator.clipboard.writeText(toCopy);
console.log('Text or Page URL copied');
} catch (err) {
console.error('Failed to copy: ', err);
}
}
Utilisé dans mon code angulaire 6+ comme suit:
<button mat-menu-item (click)="copySomething()">
<span>Copy link</span>
</button>
Si je passe dans une chaîne, il la copie. Si rien, copie l'URL de la page.
Il est également possible de faire plus de gymnastique dans le presse-papiers. Voir plus d'infos ici:
https://developers.google.com/web/updates/2018/03/clipboardapi
Les autres méthodes copieront du texte brut dans le presse-papiers. Pour copier le code HTML (vous pouvez coller les résultats dans un éditeur WSIWYG), vous pouvez procéder comme suit dans IE UNIQUEMENT . C'est fondamentalement différent des autres méthodes, car le navigateur sélectionne visiblement le contenu.
// create an editable DIV and append the HTML content you want copied
var editableDiv = document.createElement("div");
with (editableDiv) {
contentEditable = true;
}
editableDiv.appendChild(someContentElement);
// select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select();
r.execCommand("Copy");
// deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(someHiddenDiv);
r.select();
J'utilise cela avec beaucoup de succès ( sans jquery ou tout autre framework).
function copyToClp(txt){
txt = document.createTextNode(txt);
var m = document;
var w = window;
var b = m.body;
b.appendChild(txt);
if (b.createTextRange) {
var d = b.createTextRange();
d.moveToElementText(txt);
d.select();
m.execCommand('copy');
} else {
var d = m.createRange();
var g = w.getSelection;
d.selectNodeContents(txt);
g().removeAllRanges();
g().addRange(d);
m.execCommand('copy');
g().removeAllRanges();
}
txt.remove();
}
Attention
Les onglets sont convertis en espaces (au moins en chrome).
Depuis récemment, Chrome 42+ et Firefox 41+ prennent désormais en charge la commande document.execCommand ('copy'). J'ai donc créé quelques fonctions pour la copie d'un navigateur à un autre dans le presse-papiers en combinant ancienne réponse de Tim Down _ et réponse de Google Developer :
function selectElementContents(el) {
// Copy textarea, pre, div, etc.
if (document.body.createTextRange) {
// IE
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.select();
textRange.execCommand("Copy");
} else if (window.getSelection && document.createRange) {
// non-IE
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copy command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
}
} // end function selectElementContents(el)
function make_copy_button(el) {
var copy_btn = document.createElement('input');
copy_btn.type = "button";
el.parentNode.insertBefore(copy_btn, el.nextSibling);
copy_btn.onclick = function() {
selectElementContents(el);
};
if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) {
// Copy works with IE 4+, Chrome 42+, Firefox 41+, Opera 29+
copy_btn.value = "Copy to Clipboard";
} else {
// Select only for Safari and older Chrome, Firefox and Opera
copy_btn.value = "Select All (then press CTRL+C to Copy)";
}
}
/* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy
but there was a bug in Chrome versions 42 to 47 that makes it return "false". So in those
versions of Chrome feature detection does not work!
See https://code.google.com/p/chromium/issues/detail?id=476508
*/
make_copy_button(document.getElementById("markup"));<pre id="markup">
Text that can be copied or selected with cross browser support.
</pre> <!DOCTYPE html>
<style>
#t {
width: 1px
height: 1px
border: none
}
#t:focus {
outline: none
}
</style>
<script>
function copy(text) {
var t = document.getElementById('t')
t.innerHTML = text
t.select()
try {
var successful = document.execCommand('copy')
var msg = successful ? 'successfully' : 'unsuccessfully'
console.log('text coppied ' + msg)
} catch (err) {
console.log('Unable to copy text')
}
t.innerHTML = ''
}
</script>
<textarea id=t></textarea>
<button onclick="copy('hello world')">
Click me
</button>A partir de Flash 10, vous ne pouvez copier dans le Presse-papiers que si l'action provient d'une interaction de l'utilisateur avec un objet Flash. ( Lisez la section relative à l'annonce de Flash 10 d'Adobe )
La solution consiste à placer un objet flash au-dessus du bouton Copier ou à n’importe quel élément à l’origine de la copie. Zero Clipboard est actuellement la meilleure bibliothèque avec cette implémentation. Les développeurs Flash expérimentés peuvent simplement vouloir créer leur propre bibliothèque.
J'ai trouvé la solution suivante:
J'ai le texte dans une entrée cachée. Étant donné que setSelectionRange ne fonctionne pas sur les entrées masquées, j'ai temporairement modifié le type en texte, copié le texte puis le masqué à nouveau. Si vous souhaitez copier le texte d'un élément, vous pouvez le transmettre à la fonction et enregistrer son contenu dans la variable cible.
jQuery('#copy').on('click', function () {
copyToClipboard();
});
function copyToClipboard() {
var target = jQuery('#hidden_text');
// make it visible, so can be focused
target.attr('type', 'text');
target.focus();
// select all the text
target[0].setSelectionRange(0, target.val().length);
// copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch (e) {
succeed = false;
}
// hide input again
target.attr('type', 'hidden');
return succeed;
}
Copier le texte de l'entrée HTML dans le Presse-papiers
function myFunction() { /* Get the text field */ var copyText = document.getElementById("myInput"); /* Select the text field */ copyText.select(); /* Copy the text inside the text field */ document.execCommand("Copy"); /* Alert the copied text */ alert("Copied the text: " + copyText.value); }<!-- The text field --> <input type="text" value="Hello Friend" id="myInput"> <!-- The button used to copy the text --> <button onclick="myFunction()">Copy text</button>Remarque: _ La méthode
document.execCommand()n'est pas prise en charge dans IE9 et les versions antérieures.
J'ai réuni ce que je pense être le meilleur.
- Utilise cssText pour éviter les exceptions dans IE, par opposition au style directement.
- Restaure la sélection s'il y en avait une
- Définit en lecture seule pour que le clavier n'apparaisse pas sur les appareils mobiles
- Contient une solution de contournement pour iOS afin qu'il fonctionne réellement comme il bloque normalement execCommand.
C'est ici:
const copyToClipboard = (function initClipboardText() {
const textarea = document.createElement('textarea');
// Move it off screen.
textarea.style.cssText = 'position: absolute; left: -99999em';
// Set to readonly to prevent mobile devices opening a keyboard when
// text is .select()'ed.
textarea.setAttribute('readonly', true);
document.body.appendChild(textarea);
return function setClipboardText(text) {
textarea.value = text;
// Check if there is any content selected previously.
const selected = document.getSelection().rangeCount > 0 ?
document.getSelection().getRangeAt(0) : false;
// iOS Safari blocks programmtic execCommand copying normally, without this hack.
// https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios
if (navigator.userAgent.match(/ipad|iPod|iphone/i)) {
const editable = textarea.contentEditable;
textarea.contentEditable = true;
const range = document.createRange();
range.selectNodeContents(textarea);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
textarea.setSelectionRange(0, 999999);
textarea.contentEditable = editable;
} else {
textarea.select();
}
try {
const result = document.execCommand('copy');
// Restore previous selection.
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
return result;
} catch (err) {
return false;
}
};
})();
Dans les navigateurs autres que IE, vous devez utiliser un petit objet flash pour manipuler le presse-papiers, par exemple.
J'ai eu le même problème lors de la création d'une grille personnalisée (quelque chose comme Excel) et de la compatibilité avec Excel. Je devais supporter la sélection de plusieurs cellules, le copier-coller.
Solution: créez une zone de texte dans laquelle vous allez insérer des données à copier par l'utilisateur (pour moi lorsque l'utilisateur sélectionne des cellules), définissez le focus dessus (par exemple, lorsque l'utilisateur appuie sur Ctrl) et sélectionnez le texte entier.
Donc, quand l'utilisateur a frappé Ctrl + C il obtient des cellules copiées qu’il a sélectionnées. Après avoir testé, il suffit de redimensionner la zone de texte à un pixel (je n’ai pas vérifié si cela fonctionnerait: aucun). Cela fonctionne bien sur tous les navigateurs, et il est transparent pour l'utilisateur.
Coller - vous pouvez faire la même chose (cela diffère selon votre cible) - restez concentré sur textarea et capturez les événements de collage à l'aide de onpaste (dans mon projet, j'utilise textareas dans les cellules à modifier).
Je ne peux pas coller un exemple (projet commercial), mais vous voyez l'idée.
J'ai utilisé clipboard.js
on peut l'obtenir sur npm
npm install clipboard --save
et aussi sur bower
bower install clipboard --save
Les exemples d'utilisation sont à https://zenorocha.github.io/clipboard.js/
Beaucoup de réponses déjà mais j'aime bien en ajouter une (jQuery). Fonctionne comme un charme sur tous les navigateurs, même mobiles (c.-à-d. Des instructions relatives à la sécurité mais lorsque vous l'acceptez, cela fonctionne parfaitement).
function appCopyToClipBoard( sText )
{
var oText = false,
bResult = false;
try
{
oText = document.createElement("textarea");
$(oText).addClass('clipboardCopier').val(sText).insertAfter('body').focus();
oText.select();
document.execCommand("Copy");
bResult = true;
} catch(e) {}
$(oText).remove();
return bResult;
}
Dans votre code:
if( !appCopyToClipBoard( 'Hai there! This is copied to the clipboard.' ))
{ alert('Sorry, copy to clipboard failed.'); }
Ceci est une extension de la réponse de @ Chase, avec l'avantage de fonctionner pour les éléments IMAGE et TABLE, et pas seulement pour les éléments DIV sur IE9.
if (document.createRange) {
// IE9 and modern browsers
var r = document.createRange();
r.setStartBefore(to_copy);
r.setEndAfter(to_copy);
r.selectNode(to_copy);
var sel = window.getSelection();
sel.addRange(r);
document.execCommand('Copy'); // does nothing on FF
} else {
// IE 8 and earlier. This stuff won't work on IE9.
// (unless forced into a backward compatibility mode,
// or selecting plain divs, not img or table).
var r = document.body.createTextRange();
r.moveToElementText(to_copy);
r.select()
r.execCommand('Copy');
}
C’est la seule chose à laquelle j’ai eu à travailler, après avoir cherché de différentes façons tout autour d’Internet. C'est un sujet désordonné. Beaucoup de solutions affichées dans le monde et la plupart d'entre elles ne fonctionnent pas. Cela a fonctionné pour moi:
REMARQUE: ce code ne fonctionnera que s'il est exécuté en tant que code synchrone direct avec une méthode similaire à une méthode 'onClick'. Si vous appelez dans une réponse async à ajax ou de toute autre manière async, cela ne fonctionnera pas
copyToClipboard(text) {
var copyText = document.createElement("input");
copyText.type = "text";
document.body.appendChild(copyText);
copyText.style = "display: inline; width: 1px;";
copyText.value = text;
copyText.focus();
document.execCommand("SelectAll");
document.execCommand("Copy");
copyText.remove();
}
Je me rends bien compte que ce code affichera un composant de largeur 1px de manière visible sur l’écran pendant une milliseconde, mais j’ai décidé de ne pas s’inquiéter de cela, problème que d’autres peuvent résoudre si un problème réel se pose.
Il semble que j'ai mal compris la question, mais pour référence, vous pouvez extraire une plage du DOM (pas dans le presse-papier; compatible avec tous les navigateurs modernes) et la combiner avec les événements oncopy, onpaste et onbeforepaste pour obtenir le comportement du presse-papier. Voici le code pour y parvenir:
function clipBoard(sCommand) {
var oRange=contentDocument.createRange();
oRange.setStart(startNode, startOffset);
oRange.setEnd(endNode, endOffset);
/* This is where the actual selection happens.
in the above, startNode and endNode are dom nodes defining the beginning
and end of the "selection" respectively. startOffset and endOffset are
constants that are defined as follows:
END_TO_END: 2
END_TO_START: 3
NODE_AFTER: 1
NODE_BEFORE: 0
NODE_BEFORE_AND_AFTER: 2
NODE_INSIDE: 3
START_TO_END: 1
START_TO_START: 0
and would be used like oRange.START_TO_END */
switch(sCommand) {
case "cut":
this.oFragment=oRange.extractContents();
oRange.collapse();
break;
case "copy":
this.oFragment=oRange.cloneContents();
break;
case "paste":
oRange.deleteContents();
var cloneFragment=this.oFragment.cloneNode(true)
oRange.insertNode(cloneFragment);
oRange.collapse();
break;
}
}
C'est un peu une combinaison des autres réponses.
var copyToClipboard = function(textToCopy){
$("body")
.append($('<input type="text" name="fname" class="textToCopyInput"/>' )
.val(textToCopy))
.find(".textToCopyInput")
.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
alert('Text copied to clipboard!');
} catch (err) {
window.Prompt("To copy the text to clipboard: Ctrl+C, Enter", textToCopy);
}
$(".textToCopyInput").remove();
}
Il utilise jQuery, mais ce n'est pas obligé bien sûr. Tu peux changer ça si tu veux. Je viens d'avoir jQuery à ma disposition. Vous pouvez également ajouter des CSS pour vous assurer que l'entrée ne s'affiche pas. Par exemple, quelque chose comme:
.textToCopyInput{opacity: 0; position: absolute;}
Ou bien sûr, vous pouvez également faire un peu de style en ligne
.append($('<input type="text" name="fname" style="opacity: 0; position: absolute;" class="textToCopyInput"/>' )
Ma faute. Cela ne fonctionne que dans IE.
Voici encore un autre moyen de copier du texte:
<p>
<a onclick="window.clipboardData.setData('text', document.getElementById('Test').innerText);">Copy</a>
</p>
Pour copier un texte sélectionné ("Texte à copier") dans votre presse-papiers, créez un favori (marque-page du navigateur exécutant Javsacript) et exécutez-le (cliquez dessus) . Il créera une zone de texte temporaire.
Code de Github:
https://Gist.github.com/stefanmaric/2abf96c740191cda3bc7a8b0fc905a7d
(function (text) {
var node = document.createElement('textarea');
var selection = document.getSelection();
node.textContent = text;
document.body.appendChild(node);
selection.removeAllRanges();
node.select();
document.execCommand('copy');
selection.removeAllRanges();
document.body.removeChild(node);
})('Text To Copy');
Je devais copier le texte des cases non saisies (texte dans n'importe quelle balise div/span) de la page et créer le code suivant. La seule astuce consiste à avoir un champ masqué, mais en tant que type TEXT, il ne fonctionnera pas avec le type masqué.
function copyToClipboard(sID) {
var aField = document.getElementById("hiddenField");
aField.hidden = false;
aField.value = document.getElementById(sID).textContent;
aField.select();
document.execCommand("copy");
alert("Following text has been copied to the clipboard.\n\n" + aField.value);
aField.hidden = true;
}
Et dans le HTML ajouter ce qui suit
type d'entrée = "text" id = "hiddenField" style = "width: 5px; border: 0" /> ...
On dirait que vous avez pris le code de Greasemonkey\JavaScript Bouton Copier dans le presse-papiers ou la source originale de cet extrait ...
Ce code était pour Greasemonkey, d'où le unsafeWindow. Et je suppose que l'erreur de syntaxe dans IE provient du mot clé const qui est spécifique à Firefox (remplacez-le par var).
Autant que je sache, cela ne fonctionne que dans Internet Explorer.
Voir aussi Outils dynamiques - Copier JavaScript dans le presse-papier, mais l'utilisateur doit d'abord modifier la configuration, ce qui ne semble pas fonctionner.
Pour des raisons de sécurité, vous ne pouvez pas faire cela. Vous devez choisir Flash pour le copier dans le presse-papier.
Je suggère celui-ci: http://zeroclipboard.org/
Mise à jour 2015: il existe actuellement un moyen d'utiliser document.execCommand pour travailler avec le presse-papiers . clipboard.js fournit un moyen de navigation croisé pour utiliser le presse-papiers ( support du navigateur )
J'allais utiliser clipboard.js, mais il n'a pas (encore) de solution mobile en place ... alors j'ai écrit une super petite bibliothèque:
https://github.com/ryanpcmcquen/cheval
Cela copiera le texte (Desktop/Android/Safari 10+) ou, à tout le moins, sélectionnera le texte (anciennes versions d’iOS). Minified c'est juste au-dessus de 1ko. Sur le bureau Safari (appuyez sur Commande + C pour copier. Vous n'avez également pas besoin d'écrire de code JavaScript pour l'utiliser.
Dans Chrome, vous pouvez utiliser copy('the text or variable etc') . Bien que cela ne soit pas multi-navigateur (et ne fonctionne pas dans un extrait? ), vous pouvez l'ajouter aux autres réponses multi-navigateur.
@ Jimbo, voici le simple presse-papiers basé sur Ajax/session pour le même site Web.
Notez que la session doit être activée et valide et que cette solution fonctionne pour le même site. Je l'ai testé sur CodeIgniter, mais j'ai rencontré un problème session/Ajax, mais this a également résolu ce problème Si vous ne voulez pas jouer avec des sessions, utilisez une table de base de données.
JavaScript/jQuery
<script type="text/javascript">
$(document).ready(function() {
$("#copy_btn_id").click(function(){
$.post("<?php echo base_url();?>ajax/foo_copy/"+$(this).val(), null,
function(data){
// Copied successfully
}, "html"
);
});
$("#paste_btn_id").click(function() {
$.post("<?php echo base_url();?>ajax/foo_paste/", null,
function(data) {
$('#paste_btn_id').val(data);
}, "html"
);
});
});
</script>
Contenu HTML
<input type='text' id='copy_btn_id' onclick='this.select();' value='myvalue' />
<input type='text' id='paste_btn_id' value='' />
PHP code
<?php
class Ajax extends CI_Controller {
public function foo_copy($val){
$this->session->set_userdata(array('clipboard_val' => $val));
}
public function foo_paste(){
echo $this->session->userdata('clipboard_val');
exit();
}
}
?>
En plus de Réponse mise à jour de Dean Taylor (juillet 2015) , j'ai écrit une méthode jQuery ressemblant à son exemple.
/**
* Copies the current selected text to the SO clipboard
* This method must be called from an event to work with `execCommand()`
* @param {String} text Text to copy
* @param {Boolean} [fallback] Set to true shows a Prompt
* @return Boolean Returns `true` if the text was copied or the user clicked on accept (in Prompt), `false` otherwise
*/
var CopyToClipboard = function(text, fallback){
var fb = function () {
$t.remove();
if (fallback !== undefined && fallback) {
var fs = 'Please, copy the following text:';
if (window.Prompt(fs, text) !== null) return true;
}
return false;
};
var $t = $('<textarea />');
$t.val(text).css({
width: '100px',
height: '40px'
}).appendTo('body');
$t.select();
try {
if (document.execCommand('copy')) {
$t.remove();
return true;
}
fb();
}
catch (e) {
fb();
}
};
Si vous lisez du texte du presse-papiers dans une extension Chrome, avec l'autorisation "clipboardRead" autorisée, vous pouvez utiliser le code ci-dessous:
function readTextFromClipboardInChromeExtension() {
var ta = $('<textarea/>');
$('body').append(ta);
ta.focus();
document.execCommand('paste');
var text = ta.val();
ta.blur();
ta.remove();
return text;
}
En utilisant la fonction Javascript en utilisant try/catch, vous pouvez même avoir une meilleure gestion des erreurs, comme ceci:
copyToClipboard() {
let el = document.getElementById('Test').innerText
el.focus(); // el.select();
try {
var successful = document.execCommand('copy');
if (successful) {
console.log('Copied Successfully! Do whatever you want next');
} else {
throw ('Unable to copy');
}
} catch (err) {
console.warn('Oops, Something went wrong ', err);
}
}
Si le lien copié doit être collé sur le même site, une solution simple consiste à mettre le texte en surbrillance avant d'appuyer sur le bouton de copie HTML simple, puis le contenu du texte est enregistré dans une session. Et partout où il doit être collé, il y a un bouton coller.
** Je sais, ce n'est pas une solution persistante et universelle, mais c'est quelque chose :)
J'ai compilé quelques fonctions dans une solution simple pour couvrir tous les cas, avec une solution de secours si nécessaire.
window.copyToClipboard = function(text) {
// IE specific
if (window.clipboardData && window.clipboardData.setData) {
return clipboardData.setData("Text", text);
}
// all other modern
target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.textContent = text;
document.body.appendChild(target);
target.focus();
target.setSelectionRange(0, target.value.length);
// copy the selection of fall back to Prompt
try {
document.execCommand("copy");
target.remove();
console.log('Copied to clipboard: "'+text+'"');
} catch(e) {
console.log("Can't copy string on this browser. Try to use Chrome, Firefox or Opera.")
window.Prompt("Copy to clipboard: Ctrl+C, Enter", text);
}
}
Testez-le ici https://jsfiddle.net/jv0avz65/
Après avoir recherché une solution compatible avec Safari et d’autres navigateurs (IE9 +),
J'utilise le même que Github: ZeroClipboard
Exemple :
http://zeroclipboard.org/index-v1.x.html
HTML
<html>
<body>
<button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
<script src="ZeroClipboard.js"></script>
<script src="main.js"></script>
</body>
</html>
JS
var client = new ZeroClipboard(document.getElementById("copy-button"));
client.on("ready", function (readyEvent) {
// alert( "ZeroClipboard SWF is ready!" );
client.on("aftercopy", function (event) {
// `this` === `client`
// `event.target` === the element that was clicked
event.target.style.display = "none";
alert("Copied text to clipboard: " + event.data["text/plain"]);
});
});
Juste en ajoutant le mien aux réponses.
C'est le meilleur. Tellement gagner.
var toClipboard = function(text) {
var doc = document;
// Create temp element
var textarea = doc.createElement('textarea');
textarea.style.position = 'absolute';
textarea.style.opacity = '0';
textarea.textContent = text;
doc.body.appendChild(textarea);
textarea.focus();
textarea.setSelectionRange(0, textarea.value.length);
// copy the selection
var success;
try {
success = doc.execCommand("copy");
} catch(e) {
success = false;
}
textarea.remove();
return success;
}
C'était la seule chose qui a fonctionné pour moi:
let textarea = document.createElement('textarea');
textarea.setAttribute('type', 'hidden');
textarea.textContent = 'the string you want to copy';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
J'ai assemblé la solution présentée par @ dean-taylor ici avec un autre code de sélection/désélectionnement ailleurs dans un plugin jQuery disponible sur NPM:
https://www.npmjs.com/package/jquery.text-select
Installer:
npm install --save jquery.text-select
Usage:
<script>
$(document).ready(function(){
$("#selectMe").selectText(); // Hightlight / select the text
$("#selectMe").selectText(false); // Clear the selection
$("#copyMe").copyText(); // Copy text to clipboard
});
</script>
Des informations supplémentaires sur les méthodes/événements sont disponibles sur la page du registre NPM ci-dessus.
Utiliser document.execCommand fera le travail pour vous ...
En utilisant cela, vous pouvez aussi couper, copier et coller aussi ...
Ceci est une simple fonctionnalité de copie de presse-papiers qui copie tout du texte saisi ...
function copyInputText() {
var copyText = document.querySelector("#input");
copyText.select();
document.execCommand("copy");
}
document.querySelector("#copy").addEventListener("click", copyInputText);<input id="input" type="text" />
<button id="copy">Copy</button>Pour plus d'informations, visitez ici
Voici un exemple simple;)
<!DOCTYPE html>
<html>
<body>
<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>
<p>The document.execCommand() method is not supported in IE8 and earlier.</p>
<script>
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
document.execCommand("copy");
alert("Copied the text: " + copyText.value);
}
</script>
</body>
</html>
Cela peut être fait simplement en combinant les commandes getElementbyId, Select (), blur () et copy.
Remarque
la méthode select () sélectionne tout le texte d'un élément ou d'un élément avec un champ de texte. Cela pourrait ne pas fonctionner sur un bouton
Utilisation
let copyText = document.getElementById('input-field');
copyText.select()
document.execCommand("copy");
copyReferal.blur()
document.getElementbyId('help-text').textContent = 'Copied'
La méthode blur () supprimera la partie mise en évidence moche au lieu de pouvoir montrer au beau message que votre contenu a été copié avec succès
Voici une solution élégante pour Angular 5.x +:
Composant:
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
EventEmitter,
Input,
OnInit,
Output,
Renderer2,
ViewChild
} from '@angular/core';
@Component({
selector: 'copy-to-clipboard',
templateUrl: './copy-to-clipboard.component.html',
styleUrls: ['./copy-to-clipboard.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CopyToClipboardComponent implements OnInit {
@ViewChild('input') input: ElementRef;
@Input() size = 'md';
@Input() theme = 'complement';
@Input() content: string;
@Output() copied: EventEmitter<string> = new EventEmitter<string>();
@Output() error: EventEmitter<string> = new EventEmitter<string>();
constructor(private renderer: Renderer2) {}
ngOnInit() {}
copyToClipboard() {
const rootElement = this.renderer.selectRootElement(this.input.nativeElement);
// iOS Safari blocks programmtic execCommand copying normally, without this hack.
// https://stackoverflow.com/questions/34045777/copy-to-clipboard-using-javascript-in-ios
if (navigator.userAgent.match(/ipad|iPod|iphone/i)) {
this.renderer.setAttribute(this.input.nativeElement, 'contentEditable', 'true');
const range = document.createRange();
range.selectNodeContents(this.input.nativeElement);
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
rootElement.setSelectionRange(0, 999999);
} else {
rootElement.select();
}
try {
document.execCommand('copy');
this.copied.emit();
} catch (err) {
this.error.emit(err);
}
};
}
Modèle:
<button class="btn btn-{{size}} btn-{{theme}}" type="button" (click)="copyToClipboard()">
<ng-content></ng-content>
</button>
<input #input class="hidden-input" [ngModel]="content">
Modes:
.hidden-input {
position: fixed;
top: 0;
left: 0;
width: 1px;
height: 1px;
padding: 0;
border: 0;
box-shadow: none;
outline: none;
background: transparent;
}
J'ai essayé beaucoup de solutions. Si cela fonctionne dans les navigateurs modernes, cela ne fonctionnera pas dans IE. si cela fonctionne dans IE, ce ne sera pas dans IOS. Finalement, nous les avons tous soignés et sommes arrivés au correctif ci-dessous, qui fonctionne dans tous les navigateurs, IOS, Webview et Android.
Remarque: Le scénario dans lequel l'utilisateur refuse l'autorisation d'accéder au Presse-papiers est également couvert. De plus, le message "lien copié" sera affiché même si l'utilisateur copie manuellement.
<div class="form-group col-md-12">
<div class="input-group col-md-9">
<input name="copyurl"
type="text"
class="form-control br-0 no-focus"
id="invite-url"
placeholder="http://www.invitelink.com/example"
readonly>
<span class="input-group-addon" id="copy-link" title="Click here to copy the invite link">
<i class="fa fa-clone txt-18 text-success" aria-hidden="true"></i>
</span>
</div>
<span class="text-success copy-success hidden">Link copied.</span>
Scénario:
var addEvent = window.attachEvent || window.addEventListener;
var event = 'copy';
var $inviteUrl = $('#invite-url');
$('#copy-link').on('click', function(e) {
if ($inviteUrl.val()) {
if (navigator.userAgent.match(/ipad|iPod|iphone/i)) {
var el = $inviteUrl.get(0);
var editable = el.contentEditable;
var readOnly = el.readOnly;
el.contentEditable = true;
el.readOnly = false;
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
el.setSelectionRange(0, 999999);
el.contentEditable = editable;
el.readOnly = readOnly;
document.execCommand('copy');
$inviteUrl.blur();
} else {
$inviteUrl.select();
document.execCommand("copy");
}
}
});
addEvent(event, function(event) {
if ($inviteUrl.val() && event.target.id == 'invite-url') {
var $copyLink = $('#copy-link i');
$copyLink.removeClass('fa-clone');
$copyLink.addClass('fa-check');
$('.copy-success').removeClass('hidden');
setTimeout(function() {
$copyLink.removeClass('fa-check');
$copyLink.addClass('fa-clone');
$('.copy-success').addClass('hidden');
}, 2000);
}
});
Voici ma solution
var codeElement = document.getElementsByClassName("testelm") && document.getElementsByClassName("testelm").length ? document.getElementsByClassName("testelm")[0] : "";
if (codeElement != "") {
var e = document.createRange();
e.selectNodeContents(codeElement);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(e);
document.execCommand("Copy");
selection.removeAllRanges();
}