11484 sujets

JavaScript, DOM et API Web HTML5

Copier vers presse-papier sans zone de texte

Salut,

Même si peine à avoir des réponses à mes questions, je persiste...

Donc je suis en train de faire un bouton, à terme cela sera une image, pour copier du texte, un lien exactement. Le soucis c'est que cette zone de texte qu'elle soit un INPUT ou un TEXTAREA, je ne souhaite pas qu'elle soit visible.

Si je fais un
<input id="input" type="hidden" value="lien_a_copier" />

Cela ne fonctionne pas à cause du type="hidden", il faut que je le laisse en type="text".

Si je mets en CSS un display: none ou même un visibility: hidden, même problème.

La seule solution que j'ai en tête est de déplacer cette zone de texte en dehors du viewport...

Avez-vous une solution ? Merci
Modifié par LeKiffeur (03 May 2020 - 23:12)
Si ça intéresse du monde voici :
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Copie vers presse-papier</title>
</head>

<body>
    <input id="input" type="text" value="lien_a_copier">
    <img id="copy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAAA90lEQVRIieXUQUoDQRAF0DcusjJLbxAv4E49i7mNZjyEOY07r+DSUcELRCW0i67ARCeKPR0Q/DBQVA+/q399Pv8dE1zjER0W0auGFunTd1Xzgi5Iz3Aeddf/4WAE+QxHUTe9fhrBCaayNCtf5Um4LCVuMJcXmrDGUl7yEx6CvGjJJ7jtTXmH0xKivu2eo17GtCn6c9ua/wpDtkt4jbNpKfEGQ7Z7x3Ep4S6bFkvwExaGJVqpJNEkLulk67W4sb3kC3t4YTWbfodGnn5jhLX8ulZ+bbU0PQyiXVFRLU1neLPHNL3HS9RV07SPIVsXp+kQ+rYelaZ/Fx/qFGA0s1bFCgAAAABJRU5ErkJggg==">
</body>

</html>

      
#input {
    position: absolute;
    top: -99px;
}

#copy {
    cursor: pointer;
}


function copy() {
    var copyText = document.querySelector("#input");
    copyText.select();
    document.execCommand("copy");
}

document.querySelector("#copy").addEventListener("click", copy);
J'ai reçu un email ces derniers jours mais la réponse a dû être supprimée, je la remets si ça peut être utile, je vais essayer à l'occasion mais je n'avais pas pensé à ça, créer un input temporaire en javascript...
wefbee a écrit :
Developing this function will help you solve your problem:
function Clipboard_CopyTo(value) {
    var tempInput = document.createElement("input");
    tempInput.value = value;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);
}

document.querySelector('#Copy').onclick = function() {
    Clipboard_CopyTo('Text to copy!');
}
Sujet clos
Aller à