Chrome extensions copy

tribal
Javascript

Salut à tous, voilà en ayant suivi le petit tuto sur la création d'une extension chrome je suis confontre à un problème.

Je voudrais en cliquant sur un bouton copier le text inclus dans le input.

Dans un premier temps j'ai ajouter dans mon manifeste des permissions pour "clipboardWrite" et "clipboardRead"

Dans mon js j'ai mis ceci (bout de code trouvé sur le net)

function copy(){
    var copyDiv = document.getElementById('textcopy');
    copyDiv.focus();
    document.execCommand('SelectAll');
    document.execCommand("Copy", false, null);

    /*document.getElementById("textcopy").select();
    document.execCommand("Copy", false, null);*/
}
document.addEventListener("DOMContentLoaded", function () {
    document.getElementById("copy").onclick = copy;
});

Et dans mon HTML ceci 

<input type="text" id="textcopy" value="azerty"><button id="copy">Copier</button>
<input type="text" id="textcopy" value="ytreza"><button id="copy">Copier</button>

Bon déjà le code fonctionne j'arrive à copier le 1er mais le deuxième ne fonctionne pas.
Auriez vous une idée ?

17 réponses

betaWeb
Réponse acceptée

Voilà : https://jsfiddle.net/px7pfyru/1/

Azorgh

Un ID doit être unique. Donc la tu as 2 boutons avec le même ID, et Javascript prend le premier. Donc soit change ta méthode getById par Class ou alors utilise les attributs HTML5.

tribal
Auteur

Merci de ta réponse je voudrais bien le faire en jquery mais je bloque sur le execCommand

betaWeb

Salut,

Pourquoi vouloir absolument le faire en jQuery ?...

tribal
Auteur

Je ne veux pas le faire absolument en jquery, c'est que pour moi c'est plus simple. Sa fait un petit moment que je fait plus de vrai JS je suis un peu perdu

betaWeb

Eh beh c'est le moment de t'y remettre. Il faut perdre cette mauvaise habitude de passer systématiquement par jQuery pour tout et rien.
Sinon pour ton problème, je pense que @PallMallShow a identifié la source, a savoir qu'un ID se doit d'être unique.

tribal
Auteur

C'est pour ca que à la base j'ai pris ce petit bout de code en JS. Mais la fonction copy avec la chrome extensions à l'air assez assardeuse

Azorgh

Pourquoi dis tu qu'elle est hasardeuse ? (et pas assardeuse x) )
En effet, comme je l'ai dis dans mon premier message ainsi que @betaWeb, il faut qu'un ID soit unique. Donc probablement que la fonction 'hasardeuse' vient de là.

tribal
Auteur

bref je vais chercher

betaWeb

Ne cherches pas, ton erreur vient soit des IDs en doublons, soit que Chrome ne supporte pas la fonction document.execCommand(); lorsque ça concerne les extensions (à vérifier).

tribal
Auteur

Oui je sais que le prob viens de mes ID j'essai de faire passer en class mais j'ai plus de 200 lignes donc faut que j'automatise un peu.
Je suis entrain d'essayer de faire une gestion avec un rel sur le bouton copy par exemple

tribal
Auteur

Bon j'ai beau essayer de mettre un get class sur mon bouton cliquer j'arrive pas à lui faire passer sur le second bouton
voici mon code actuel [https://jsfiddle.net/px7pfyru/]()

betaWeb

Tiens là ça fonctionne : https://jsfiddle.net/px7pfyru/

tribal
Auteur

merci mais c'est le meme tu a oublier faire update

betaWeb

Rhaa p*tain c'est pour ça que je n'aime pas JSFiddle...

tribal
Auteur

merci effectivement j'etais loin de la solution.
Merci beaucoup en tout cas

betaWeb

Pas de quoi. Rien de bien compliqué ^^
Passe ton sujet en résolu ;)