Cliquer sur un champ, pour recopier sa valeur automatiquement dans un <input>

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Hello ;)

Je fais appel à votre aide pour écrire un petit bout de code en JavaScript. Je souhaite copier la valeur d’un <div>, <span> ou <a> (enfin peu importe); pour le coller directement dans un <input> lors d’un clique.

Je suis un peu perdu, j’ai essayé avec jQuery, mais ça ne donne rien de concluant.

Voici le code :

le lien :

<a href="#data" class="btn btn-primary" id="btn-copier" data-clipboard-text="data-a-copier">data-a-copier</a>

le input :

<input type="text value="" id="input-copier" />

Là, je bloque sur le JS :P

Actuellement, je clique sur le <a>, ça copie les données dans mon clipboard, puis je colle dans le <input>. Mais cette méthode est vraiment chronophage et avec ce que je veux faire, je gagnerai 3 cliques, ce n’est pas grand chose, mais multiplier par 100 à 250 fois / jours, multiplié / 1 année, j’économiserai environ 60.000 cliques :P

Édité par Machou

« Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n’as plus besoin de l’expérience. » Léonard De Vinci

+0 -0

Cette réponse a aidé l’auteur du sujet

Tu ajoutes un eventListener 'click' sur ton a qui appelle une fonction qui recopie la valeur de a dans input.

const a = document.getElementById('btn-copier');
a.addEventListener('click', () => {
  const input = document.getElementById('input-copier');
  input.value = a.innerText;
  return false;
}, false);

Code non testé.

Édité par ache

ache.one                 🦹         👾                                🦊

+1 -0

Cette réponse a aidé l’auteur du sujet

Je pense plus qu’il souhaite récupéré le contenu du champ data-clipboard-text.

Du coup quelque chose comme ceci devrait convenir:

const a = document.getElementById('btn-copier');
a.addEventListener('click', () => {
  const input = document.getElementById('input-copier');
  input.value = a.dataset.clipboardText;
  return false;
}, false);

Exemple

+1 -0

Certainement, l’idée était surtout de présenter comment utiliser addEventListener.

ache.one                 🦹         👾                                🦊

+1 -0
Auteur du sujet

Merci en tout cas, mais dans mon cas, la constante a ce déclare que lorsque j’ai uploadé un fichier. Donc ça me met une erreur JS

TypeError: a is null

Je pense qu’il faudrait rajouter un if(!empty(a)) mais en JS je ne sais âs faire. mais en tout cas le script est vraiment ce que je souhaite, un grand merci. Je suis un peu assisté pour le coup là :P

« Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n’as plus besoin de l’expérience. » Léonard De Vinci

+0 -0
Auteur du sujet

Tu veux dire que tu créer le lien après avoir upload le fichier ?

Heziode

C’est bien ça :)

Le lien se généré via PHP, une fois le fichier uploadé.

« Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n’as plus besoin de l’expérience. » Léonard De Vinci

+0 -0
Auteur du sujet

ah bah à ce moment là, il faut ajouter le listener quand tu ajoute l’élément.

Heziode

Je n’y ai pas pensé :)

Un énorme merci à toi <3 franchement; tu m’a redonné foi en l’humanité. AHAH

Merci :P

« Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n’as plus besoin de l’expérience. » Léonard De Vinci

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte