Je veux copier du contenu de l'ensemble de données à partir d'un élément html.Copie javascript avec execCommand
Code HTML
<p id="[email protected]{{ id }}" data-password="@{{ password }}"
data-state="0">@{{ hidePassword }}</p>
<button class="mdl-button mdl-js-button mdl-button--icon">
<i data-event="copy" data-obj="util" data-target="[email protected]{{ id }}"
class="material-icons clickable-icon">content_copy</i>
</button>
Copie Méthode
La méthode est beeing appelée par les données événement et attributs de données-obj.
copy (args) {
let copyText = document.getElementById(args.target).dataset.password;
console.log(copyTest); // output: specific password
document.execCommand("Copy");
}
Comme ceci, il ne copie pas le contenu dans le presse-papier. Quelqu'un voit une erreur?
MISE À JOUR
Le code suivant fonctionne pour la textContent réelle du HTMLElement.
Mais je dois copier la valeur de l'attribut mot de passe de données
let range = document.createRange();
let selection = window.getSelection();
let node = document.getElementById(args.target);
range.selectNodeContents(node);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");
Solution possible
J'écrire la valeur dans un champ caché, sélectionnez-le, le copier et le supprime à nouveau le champ de saisie temporaire caché.
Mais il ne copie rien.
let copyValue = document.getElementById(args.target).dataset.password;
document.body.insertAdjacentHTML('beforeend', `<input hidden id="temp-copy" value="${copyValue}">`);
let copyText = document.getElementById('temp-copy');
copyText.select();
document.execCommand("copy");
copyText.remove();
yeaa mais pour autant que je sache, il n'est pas possible d'appeler la méthode select sur un p htmltag. Je l'ai essayé, il jette une erreur copyText.select n'est pas une fonction –
@IlarioEngler Dans ce cas - https://stackoverflow.com/a/25456308/1401662 – vadim
merci, je l'ai trouvé aussi. Mais le texte est à l'intérieur d'un attribut de données –