Code JavaScript pour copier la valeur d'une liste déroulante

**cool2505** · 05/10/2014, 19h55

je recherche un code javascript pour copier dans le presse papier la valeur d'une liste déroulante ....

merci

**Watilin** · 06/10/2014, 15h59

En pur JS embarqué dans une page web, c'est impossible. C'est une restriction de sécurité, mais il existe de nombreux moyens pour la contourner. La plus populaire, à ma connaissance, passe par l'utilisation d'un bouton invisible en Flash, car le Flash, lui, peut accéder au presse-papiers.

ZeroClipboard
ZClip (ZeroClipboard adapté avec jQuery)
Un article (en anglais) qui présente les différentes possibilités

Si tu veux rester sur du JS pur, tu as toujours la possibilité d'afficher une zone de texte à côté de ta liste. Grâce à l'évènement change de ta liste, tu mets à jour la zone de texte, tu lui donnes le focus (méthode .focus()) et tu sélectionnes tout son contenu (.select()). Alors l'utilisateur n'a plus qu'à faire Ctrl+C.

**cool2505** · 10/10/2014, 08h56

Merci pour ton aide mais en JS je ne suis pas un crack ....

Peux tu me donner le code pour cette phrase:

Nom : 11.JPG
Affichages : 1109
Taille : 11,3 Ko

Code html :

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

1
2
3
4
5
6
7
8
j'ai mis <select name="heure" size="1">
             <option value="--">--</option>
             <option value="01">01</option>
             <option value="02">02</option>
             <option value="03">03</option>
             <option value="04">04</option>
          </select>
pommes dans mon panier.

Merci

**SpaceFrog** · 10/10/2014, 09h30

http://javascript.developpez.com/faq...age=formChamps

**cool2505** · 10/10/2014, 15h49

merci pour ton aide
mais j avance pas a pas avec le javascript et la seule chose que j ai réussi a faire pour le moment c de copier une valeur dune boite vers une autre....
.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<script type="text/javascript">
    var nombre = '';
 
    function copier(texte) {
      nombre = texte;
      document.getElementById('texte-copie').value = nombre;
    }
</script>
  </head>
  <body>
  <table>
    <tr><td>j'ai<input type="text"  id="nombre">pommes dans mon panier 
    <input type="button" value="Copier/coller" onclick="copier(document.getElementById('nombre').value);" /><td></tr>
	<tr><td><textarea id="texte-copie" readonly="readonly"></textarea></td></tr>
</table>
 
</body>

mais pour la valeur 12 je souhaite copier/coller toute la phrase : j'ai 12 pommes dans mon panier dans le textarea

**Watilin** · 10/10/2014, 17h16

https://www.google.fr/search?q=mise+en+page+tableau

J'ai modifié légèrement ton code, jette un œil :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<meta charset="utf-8">
<script type="text/javascript">
 
    function copier() {
      document.getElementById('texte-copie').value = 'J’ai ' +
        document.getElementById('nombre').value +
        ' pommes dans mon panier';
    }
 
</script>
</head>
<body>
 
  <p>j'ai <input type="text" id="nombre" /> pommes dans mon panier
    <input type="button" value="Copier/coller" onclick="copier()" />
  </p>
  <p>
    <textarea id="texte-copie" readonly="readonly"></textarea>
  </p>
 
</body>

**cool2505** · 10/10/2014, 18h49

faut il que je declare la variable 'nombre':

quand est il du code coller pour afficher la phrase compete dans textarea ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<meta charset="utf-8">
<script type="text/javascript">
     var nombre = '';
    function copier() {
      document.getElementById('texte-copie').value = 'J’ai ' +
        document.getElementById('nombre').value +
        ' pommes dans mon panier';
    }
	function coller() {
 
	}
 
</script>
</head>
<body>
<table>
<tr>
<td>j'ai <input type="text" id="nombre" /> pommes dans mon panier</td>
<td><input type="button" value="Copier" onclick="copier()" /></td>
</tr>
<tr>
<td><textarea id="texte-copie" readonly="readonly" cols="50" ></textarea></td>
<td><input type="button" value="Coller" onclick="coller()" /></td>
</tr>
</table>
</body>

**cool2505** · 10/10/2014, 20h31

pourquoi tu me renvoie sur l élaboration de tableau....

j aurai tout le temps de la mise en page aprés....mais pour le moment mon problème c le code javascript......

**Watilin** · 10/10/2014, 22h00

Envoyé par cool2505

pourquoi tu me renvoie sur l élaboration de tableau....

Mince je crois que tu as compris le contraire du message que je voulais faire passer. Tous ces liens expliquent en quoi c'est pas bien d'utiliser des tableaux pour la mise en page.
Je te poste un code simplifié où j'ai remplacé ta <table> par des <p>, et toi tu remets la <table>… Ça donne l'impression que tu ne lis pas attentivement les réponses. Montre-moi que ce n'est qu'une impression

Pour répondre à ta question :

faut il que je declare la variable 'nombre'

Non. En revanche tu peux garder une référence sur l'élément nommé nombre, ne serait-ce que pour raccourcir le code. Et du coup, faire de même avec texte-copie :

Code :

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

1
2
3
4
5
var $nombre = document.getElementById('nombre');
var $texteCopie = document.getElementById('texte-copie');
function copier() {
  $texteCopie.value = 'J’ai ' + $nombre.value + ' pommes dans mon panier';
}

Attention cependant avec cette solution car, ton script étant dans le head, les éléments ne sont pas prêts au moment où il s'exécute, et tu ne peux pas les récupérer tout de suite avec getElementById, il faut donc « retarder » ton script en le plaçant dans une fonction de load :

Code :

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

1
2
3
document.addEventListener('DOMContentLoaded', function() {
  ...
});

Et sinon, as-tu renoncé à essayer d'utiliser ZeroClipBoard ?

**cool2505** · 10/10/2014, 22h28

pour le moment j'ai reussi a faire ca

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<script type="text/javascript">
     var nombre = '';
    function copier(texte) {
      nombre = texte;
      document.getElementById('texte-copie').value =  'J ai ' + nombre +' pommes dans mon panier';
    }
</script>
</head>
<body>
<p>
    j'ai <input type="text" id="nombre" maxlength="2" class="champ"/> pommes dans mon panier
   <input type="button" value="Copier/coller" onclick="copier(document.getElementById('nombre').value)" />
</p>
<p><textarea id="texte-copie" readonly="readonly" cols="50" ></textarea></p>
</body>

maintenant comment puis je proceder pour ajoute "et yy poires" a ma phrase pour que cela me donne :
J'ai xx pommes et yy poires dans mon panier.

xx et yy etant 2 nombres differents.....

PS : j' ai essayer de faire fonctionner le code raccourci mais en vain......

**cool2505** · 13/10/2014, 13h26

C est bon j'ai réussi....

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
<!DOCTYPE html Public "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml/" xml:lang="fr">
  <head>
    <title>Javascript || Copier/Coller</title>
 
<meta charset="utf-8">
<style type="text/css">
.champ 
{
 width:20px;
}
</style>
<script type="text/javascript">
     var nombre = '';
    function copier(nombre1, nombre2) {
      document.getElementById('texte-copie').value =  'J ai ' + nombre1 +' pommes et ' + nombre2 +' poires dans mon panier';
    }
</script>
</head>
<body>
<p>
j'ai <select id="nombre1" size="1">
             <option value="--">--</option>
             <option value="01">01</option>
             <option value="02">02</option>
             <option value="03">03</option>
             <option value="04">04</option>
             <option value="05">05</option>
             <option value="06">06</option>
             <option value="07">07</option>
             <option value="08">08</option>			 
          </select> pommes et <select id="nombre2" size="1">
             <option value="--">--</option>
             <option value="01">01</option>
             <option value="02">02</option>
             <option value="03">03</option>
             <option value="04">04</option>
             <option value="05">05</option>
             <option value="06">06</option>
             <option value="07">07</option>
             <option value="08">08</option>		 
          </select>	poires dans mon panier
   <input type="button" value="Copier/coller" onclick="copier(document.getElementById('nombre1').value, document.getElementById('nombre2').value)" />
</p>
<p><textarea id="texte-copie" readonly="readonly" cols="50" ></textarea></p>
</body>
</html>

Code JavaScript pour copier la valeur d'une liste déroulante

JavaScript

Discussions similaires

Partager

Partager