11485 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Copier le texte d’une balise dans le presse-papiers

Bonjour à tous
J’aimerais réaliser la fonction suivante en JavaScript :
Au click sur une zone de texte, écrire le texte de la balise (outerHTML) dans le presse-papiers
J’ai cherché sur le web, je n’ai trouvé que des choses qui me semblent bien compliquées et auxquelles je n’ai rien compris.
Avez vous un exemple simple à me communiquer ?
Merci de votre aide
Oui, c'est le premier document que j'ai lu ce matin, je n'y comprends toujours rien à 18h30, mais je vais persister, peut-être serai-je moins stupide ce soir ou demain matin.
Ce que je cherche, c'est quelque chose du genre

function copyToCliboard(text) {
.....
}

Modifié par PapyJP (16 Jun 2019 - 18:30)
Bonjour. Tu utilises bien la fonction .select() ?
Un exemple fonctionnel : Scriptura, code blocks
Mais je n'arrive pas à te donner le script car je ne suis pas chez moi et Github est en rade, là, tout de suite...

Edit : c'est bon. Alors je vois que je l'avais encapsulé en jQuery à l'époque, mais tout à fait adaptable :
// ---------------------------------------------------------
// @section     Text selection
// @description Sélection du texte des blocs de code
// ---------------------------------------------------------

// @see  http://stackoverflow.com/questions/985272/selecting-text-in-an-element-akin-to-highlighting-with-your-mouse
 
// @link  http://jsfiddle.net/edelman/KcX6A/1506/
 
// @link  https://www.creativejuiz.fr/blog/tutoriels/copier-presse-papier-en-javascript
 

jQuery.fn.selectText = function() {
	var element = this[0],
		doc = document.body;
	if ( doc.createTextRange ) {
		range = doc.createTextRange();
		range.moveToElementText( element );
		range.select();
	} else if ( window.getSelection ) {
		selection = window.getSelection();
		range = document.createRange();
		range.selectNodeContents( element );
		selection.removeAllRanges();
		selection.addRange( range );
	}
};

Modifié par Olivier C (17 Jun 2019 - 08:40)
Merci Olivier

Ce n'est pas ce dont j'ai besoin, mais je comprends que pour des raisons de sécurité la fonctionnalité basique consistant à permettre d'écrire dans le clipboard une chaîne de caractères autre que ce qui est sélectionné dans une page n'est pas disponible.
Il serait en effet trop facile à un développeur de site malveillant d'utiliser une telle fonctionnalité pour perturber le fonctionnement d'un PC.
En limitant ce qu'on peu copier à ce que voit l'utilisateur, on s'assure de ne pas copier n'importe quoi. C'est ce que je ne comprenais pas dans les documents que j'ai lus: il est toujours question de copier une partie de la page, ce qui n'est pas ce que je cherche à faire.
Je ne veux pas écrire le contenu d'une balise mais outerHTML de cette balise, ce qui n'est pas sélectable puisque cette chaîne de caractères n'existe nulle part en tant que telle dans la page.
On doit pouvoir faire un contournement, je suppose, je vais y réfléchir, mais je crois plutôt que je vais essayer une autre approche pour traiter le problème.
Il s'agit d'une fonction d'administration disponible uniquement par l'auteur des pages pour lui faciliter l'écriture d'une nouvelle page. On va faire autrement.
Modifié par PapyJP (17 Jun 2019 - 09:27)
Salut

Je comprend pas forcément le besoin, tu souhaites "écrire" directement dans le clipboard ? sans voir ce que tu écris ?
JENCAL a écrit :
Salut

Je comprend pas forcément le besoin, tu souhaites "écrire" directement dans le clipboard ? sans voir ce que tu écris ?

Je souhaitais écrire dans le clipboard en sachant ce qui allait être écrit mais sans l'afficher.
Comme ce n'est pas faisable pour les raisons de sécurité expliquées ci-dessus, je vais faire la chose suivante:
au clic sur la balise à copier, j'affiche 
<input type="text" value="la chose à copier">
au dessus ou à côté de ladite balise.
Je pourrai alors copier le contenu de cette balise dans le clipboard sans problème.
Ok ok je comprend.
Rien ne t'empêche de faire exactement la même chose et de "cacher" l'input pour simuler le coté invisible et à chaque keypUp tu copy
Modifié par JENCAL (17 Jun 2019 - 11:28)
Je suis parvenu à réaliser à peu près ce que je voulais.
Merci à tous pour votre aide.
Pour ceux que ça intéresse, voici le code qui se déroule lorsqu'on clique sur la balise <input> qui contient le texte à copier:

this.copyCode = function(event) {
  event.stopPropagation();
  var codeInput = event.target;
  codeInput.select();
  document.execCommand('copy');
  alert('Le code a été copié dans le presse-papiers');
  codeInput.removeAttribute('style'); //pour cacher la balise <input>
}

Modifié par PapyJP (17 Jun 2019 - 12:39)
Sujet clos
Aller à