J'ai essayé de copier le contenu d'une balise my P dans mon presse-papiers sans aucun clic de bouton.
J'ai essayé de fonctionner parfaitement en cliquant sur le bouton. onClick.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<p id="p1">Copied..</p>
<button onclick="copyToClipboard('#p1')" id="ashvin">Copy</button>
</body>
</html>
<script>
function copyToClipboard(element) {
console.log('+++++++++++++++++++++++++++++++');
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
var status = document.execCommand("copy");
if(status){
console.log("=======done")
}else{
console.log("=======error")
}
$temp.remove();
}
</script>
Cela fonctionne bien sur le bouton, mais je veux copier au chargement de la page pas un clic.
Toute aide serait grandement appréciée. Merci!
3 Réponses :
Cela ne fonctionnera pas car la commande de copie doit être déclenchée par l'action de l'utilisateur. Voir ce post: https://w3c.github.io/ édition / execCommand.html # dfn-the-copy-command
Je suppose que cette question est une copie de: Impossible d'utiliser `document.execCommand ('copy'); `depuis la console développeur
écrivez la fonction sur document.body.onload () ou ajoutez un écouteur d'événement.
document.body.addEventListener ("load", copyToClipboard);
ou simplement
<body onload=copyToClipboard('#p1')>
..
</body>
De nombreuses méthodes document.execCommand (comme la copie) nécessitent une interaction de l'utilisateur (comme un clic) car il est considéré comme un risque de sécurité d'accéder au presse-papiers (qui est au niveau du système, pas au niveau du navigateur) avec des méthodes automatiques comme ce qui est étant demandé. Vous devrez peut-être repenser ce que vous essayez d'accomplir en copiant lors du chargement de la page.
Quel est le cas d'utilisation de ce qui précède, et peut-être que quelqu'un peut vous aider avec votre scénario?
[modifier ] Voici un lien qui montre votre script sur codepen. Lorsque vous "exécutez" la page, elle devrait donner la sortie "n'a pas fonctionné", lorsque vous cliquez sur le bouton, elle devrait donner la sortie "travaillé"
<!DOCTYPE html>
<html lang="en">
<head>
<script>
function copyToClipboard(element) {
document.execCommand("copy");
var text = document.querySelector(element).textContent;
var output = document.getElementById("output");
navigator.clipboard.writeText(text).then(function() {
output.textContent = "worked";
}, function() {
output.textContent = "didn't work";
});
}
</script>
</head>
<body onload="copyToClipboard('#p1')">
<p id="p1">Text to copy on page load.</p>
<button onclick="copyToClipboard('#p1')">
Click to copy text
</button>
<p id="output"></p>
</body>
</html>
S'il s'agit d'un projet local (c'est-à-dire qu'il ne sera pas dans le domaine public), il y a peut-être des indicateurs que vous pouvez définir dans chrome pour ignorer le risque de sécurité, mais je ne sais pas ce qu'ils sont ou s'ils existent, mais pourraient valoir le coup d'œil.
[modification mise à jour] Je suis très confus par quelque chose. Cela ressemble à un hack total, mais cela fonctionne pour moi (sur glitch.com), donc je pourrais être corrigé. J'ai utilisé la méthode native navigator.clipboard.writeText, et cela ne fonctionnait pas non plus MAIS quand j'essayais les deux méthodes côte à côte (dans chrome) pour tester que les deux ne fonctionneraient pas, cela l'a fait em> travaille pour le "navigateur". Il s'avère que si je mets document.execCommand quelque part avant que la promesse ne soit exécutée, cela semble fonctionner. MAIS cela ne fonctionne pas sur codepen ou ici dans le moteur de script en ligne (peut-être à voir avec les iframes, etc.?). Quelqu'un pourrait-il vérifier ma santé mentale s'il vous plaît?
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
var status = document.execCommand("copy");
if(status){
$("#output").text("worked")
}else{
$("#output").text("didn't work")
}
$temp.remove();
}
</script>
</head>
<body onload="copyToClipboard('#p1')">
<p id="p1">Text to copy on page load, but won't work</p>
<button onclick="copyToClipboard('#p1')">Copy the text</button>
<p id="output"></p>
</body>
</html>
Oui, @jarrod je le sais aussi, mais j'ai posé cette question parce que je veux savoir que tout autre moyen de résoudre le problème.
@Riskyleopard, j'ai mis à jour mon message parce que j'ai trouvé quelque chose de très étrange qui se passe, mais je pense (si cela fonctionne réellement, et pas une bizarrerie sur ma machine), ce serait un hack total et pourrait être un bogue dans Chrome ou quelque chose comme cette. Je pense en général qu'il n'y a pas vraiment de moyen de "résoudre" ce problème car il n'est pas cassé, c'est par conception. Et tout ce qui le contournera sera probablement corrigé à un moment donné dans le futur.
Juste pour faire un suivi: j'ai fait quelques tests, et le piratage de la version du navigateur ne fonctionne que sur le chargement de la page pour les versions 71-73 de Chrome. 74 dev build a fait ce à quoi je m'attendais, c'est-à-dire qu'il n'a pas fonctionné au chargement de la page.