Discussion :

[Freedolphin]

Bonjour à tous,

Je cherche à copier du texte avec un bouton en JS, idéalement le texte serait dans une DIV, mais apparemment, je ne peux le faire qu'avec du texte dans un input ou un textarea.
Donc, j'ai mis ce texte dans un textarea et le code ci-dessous marche très bien.
Le seul truc, c'est que le textarea fait doublon avec la DIV qui contient le texte.
J'ai essayé de cacher le textarea en CSS (display:none ou visibility:hidden), mais dans ce cas, mon bouton de copie est inopérant.
Avez-vous une autre solution pour cacher ce textarea ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function CopyText() {
	let button = document.querySelector("button");
  var copytext = document.getElementById("content");
 
  copytext.select();
  document.execCommand("copy");
 
  button.innerText = "Copié !";
} 
 
<textarea id='content'>mon texte</textarea>
<button onclick=\"CopyText()\">Copier le texte</button>

Merci d'avance pour vos bonnes idées !

[mathieu]

essayez peut-être cette bibliothèque :
https://clipboardjs.com/

[Freedolphin]

Pourquoi pas, mais cela ne répond pas vraiment à la question.
L'idée est de garder le code et d'essayer de trouver un moyen de cacher le textarea.
Ou de le remplacer par une DIV de texte.

[NoSmoking]

Bonjour,

J'ai essayé de cacher le textarea en CSS (display:none ou visibility:hidden),

il te suffit de positionner l'élément hors fenêtre, par exemple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
textarea {
  position: absolute;
  left: -999em;
}

[Freedolphin]

En effet, cette solution fonctionne très bien.
Merci !