Coller des données depuis Excel [Résolu]

Dark_TeToN · 30/11/2011, 13h27

Bonjour à tous,

Je cherche à coller des données depuis Excel dans une page web.
J'ai des textfield (éléments <input type="text" />) en ligne, et je souhaite que lorsque je copie plusieurs cellules en ligne depuis Excel, cela se colle à raison d'une cellule par textfield, dans ma page web.

J'ai des début d'éléments de réponse assez prometteurs, MAIS il reste quelques petits bugs :

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
<html>
 
	<head>
		<title>Test copier-coller depuis Excel</title>
		<script src="http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js" type="text/javascript"></script>
 
		<script type="text/javascript">     
		  function init(){
			   Event.observe('f1', 'paste', pasteCol);
			   Event.observe('f2', 'paste', pasteCol);
			   Event.observe('f3', 'paste', pasteCol);
			   Event.observe('f4', 'paste', pasteCol);
			   Event.observe('f5', 'paste', pasteCol);
			   function pasteCol(event) { 
					var notes=window.clipboardData.getData("Text");
					var tab= new RegExp('[\t]');
					notes=notes.split(tab);
 
					for (i=0; i<notes.length; i++) {
						document.getElementsByTagName("input")[i].value = notes[i];
					}
			   }
		  }
		</script>
	</head>
 
	<body>
		<input type="text" name="f1" id="f1" size="5" />
		<input type="text" name="f2" id="f2" size="5" />
		<input type="text" name="f3" id="f3" size="5" />
		<input type="text" name="f4" id="f4" size="5" />
		<input type="text" name="f5" id="f5" size="5" />
  </body>
 
</html>

J'ai plusieurs soucis :

- Le premier est que lorsque je colle, tout se passe bien sauf dans la première cellule, toutes les données collées se mettent dans la première cellule, je cherche à savoir comment est-ce que je peux modifier le contenu de mon textfield après que le collage ait eu lieu...

- Le deuxième souci est de savoir dans quel cellule est-ce que le collage a eu lieu car si l'utilisateur colle dans la 2ème cellule, le premier souci sera présent mais dans la 2ème cellule cette fois-ci, et les cellules vont se remplir depuis la première (ce qui est normal lorsque l'on regarde mon code, puisque ma boucle for commence à l'élément 0 dans tous les cas). Donc je souhaite connaitre l'élément déclencheur de l'évènement...

Merci d'avance !!!

*** EDIT : Ne fonctionne QUE sous IE... ***

Bovino · 30/11/2011, 13h37

Code :

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

var tab= new RegExp('[\t]');

Ta regexp est mal construite, il faut doubler l'échappement, ou mieux, utiliser un littéral plutôt qu'un constructeur :

Code :

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

var tab= /\t/;

.
Mais de toute façon, cela ne sert à rien de passer par une regexp, une simple chaine dans le split suffit et améliorera les performances !

Code :

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

notes=notes.split('\t');

Dark_TeToN · 30/11/2011, 14h04

Oui peut-être mais elle fonctionne... Et ce n'est pas là mon problème !!!
Pour récupérer l'évènement j'ai réussi à trouvé quelque chose qui fonctionne mais je ne dis pas que c'est très optimisé...

Me reste le problème du premier textfield...

Mon code mis à jour :

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
49
50
51
52
53
<html>
 
	<head>
		<title>Test copier-coller depuis Excel</title>
		<script src="http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js" type="text/javascript"></script>
 
		<script type="text/javascript">     
		  function init(){
			   Event.observe('f1', 'paste', pasteCol);
			   Event.observe('f2', 'paste', pasteCol);
			   Event.observe('f3', 'paste', pasteCol);
			   Event.observe('f4', 'paste', pasteCol);
			   Event.observe('f5', 'paste', pasteCol);
			   function pasteCol(event) { 
					var notes=window.clipboardData.getData("Text");
 
					notes=notes.split('\t');
 
					var elementTriggered = Event.element(event);
					var valeurDebut = 0;
					var trouve = false;
					// Boucle pour trouver l'élement qui a reçu le collage
					for (i=0; i<document.forms[0].elements.length; i++) {
						if (document.forms[0].elements[i] == elementTriggered) {
							valeurDebut = i;
							trouve = true;
							break;
						}
					}
					if (trouve) {
						var j = 0;
						for (i=valeurDebut; i<document.forms[0].elements.length-1 && j<notes.length; i++) {
							document.forms[0].elements[i].value = notes[j];
							j++;
						}
					}
			   }
		  }
		</script>
	</head>
 
	<body onload="init()">
		<form name="myForm" id="myForm">
			<input type="text" name="f1" id="f1" size="5" />
			<input type="text" name="f2" id="f2" size="5" />
			<input type="text" name="f3" id="f3" size="5" />
			<input type="text" name="f4" id="f4" size="5" />
			<input type="text" name="f5" id="f5" size="5" />
			<textarea> </textarea>
		</form>
  </body>
 
</html>

Si quelqu'un a une idée... Je vais testé avec la fonction onChange peut-être un truc dans ce style...

Bovino · 30/11/2011, 14h16

Citation:

Envoyé par Dark_TeToN

Oui peut-être mais elle fonctionne...

Ah...

Citation:

Envoyé par Dark_TeToN

toutes les données collées se mettent dans la première cellule

NoSmoking · 30/11/2011, 15h27

d'ailleurs pourquoi supprimer les tabulations, c'est ce qui permet sous excel d'envoyer la suite dans la cellule d'à coté me semble t-il?

Dark_TeToN · 30/11/2011, 16h59

Bon je vois que vous n'avez peut-être pas compris le principe... Je me suis peut-être mal exprimé.

J'ai des données dans Excel qui sont dans 5 cellules (de A1 à E1).
Je copie ces 5 cellules.
J'ai 6 textfield dans une page web. Je souhaite que lorsque je colle mes données sur le premier textfield (le plus à gauche donc) elle se répartissent toutes seules dans les différents textfield (un textfield = une cellule Excel).

Donc du coup, seule le 6ème textfield sera vide.

Le problème c'est que imaginons que j'ai ceci pour les 5 cellules :

A1 : 1
B1 : 2
C1 : 3
D1 : 4
E1 : 5

Lorsque je colle mes données dans le premier textfield (f1) j'obtiens ceci :

f1 : 1 \t 2 \t 3 \t 4 \t 5
f2 : 2
f3 : 3
f4 : 4
f5 : 5

(les \t apparaissent comme des tabulations, je n'ai pas la chaine de caractères "\t" qui apparait !).

Je souhaite simplement corriger ce qu'il y a dans le premier textfield (f1). Les autres textfields (f2 à f5) fonctionnent bien !

En fait la cause du problème vient du fait que la fonction est appelée AVANT l'action du collé dans le textfield. Donc je peux résoudre ce petit problème en ajoutant à la fin de ma fonction la ligne suivante :

Code :

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

window.clipboardData.setData("Text", notes[0]);

Le problème c'est que ça impacte le presse-papier, et je souhaite absolument que le presse-papier reste tel quel à la fin du copier-coller. Il n'y a pas possibilité d'exécuter une fonction juste après que le "coller" ait eut lieu ?

NoSmoking · 30/11/2011, 18h50

ta solution ne fonctionnerait que si tu insères en sélectionnant le champ #1

il te faut mettre un window.event.returnValue = false; à la fin de ta fonction pasteCol

Dark_TeToN · 01/12/2011, 09h44

Merci ^^

Ta petite ligne de code a la fin est super !!!

Merci beaucoup ! Problème résolu !

30/11/2011, 13h37	#2
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 808 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 808 Points : 35 789 Points : 35 789	Code : Sélectionner tout - Visualiser dans une fenêtre à part var tab= new RegExp('[\t]'); Ta regexp est mal construite, il faut doubler l'échappement, ou mieux, utiliser un littéral plutôt qu'un constructeur : Code : Sélectionner tout - Visualiser dans une fenêtre à part var tab= /\t/; . Mais de toute façon, cela ne sert à rien de passer par une regexp, une simple chaine dans le split suffit et améliorera les performances ! Code : Sélectionner tout - Visualiser dans une fenêtre à part notes=notes.split('\t'); __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

30/11/2011, 16h59	#6
Dark_TeToN Membre régulier Inscription : octobre 2006 Messages : 133 Détails du profil Informations forums : Inscription : octobre 2006 Messages : 133 Points : 75 Points : 75	Bon je vois que vous n'avez peut-être pas compris le principe... Je me suis peut-être mal exprimé. J'ai des données dans Excel qui sont dans 5 cellules (de A1 à E1). Je copie ces 5 cellules. J'ai 6 textfield dans une page web. Je souhaite que lorsque je colle mes données sur le premier textfield (le plus à gauche donc) elle se répartissent toutes seules dans les différents textfield (un textfield = une cellule Excel). Donc du coup, seule le 6ème textfield sera vide. Le problème c'est que imaginons que j'ai ceci pour les 5 cellules : A1 : 1 B1 : 2 C1 : 3 D1 : 4 E1 : 5 Lorsque je colle mes données dans le premier textfield (f1) j'obtiens ceci : f1 : 1 \t 2 \t 3 \t 4 \t 5 f2 : 2 f3 : 3 f4 : 4 f5 : 5 (les \t apparaissent comme des tabulations, je n'ai pas la chaine de caractères "\t" qui apparait !). Je souhaite simplement corriger ce qu'il y a dans le premier textfield (f1). Les autres textfields (f2 à f5) fonctionnent bien ! En fait la cause du problème vient du fait que la fonction est appelée AVANT l'action du collé dans le textfield. Donc je peux résoudre ce petit problème en ajoutant à la fin de ma fonction la ligne suivante : Code : Sélectionner tout - Visualiser dans une fenêtre à part window.clipboardData.setData("Text", notes[0]); Le problème c'est que ça impacte le presse-papier, et je souhaite absolument que le presse-papier reste tel quel à la fin du copier-coller. Il n'y a pas possibilité d'exécuter une fonction juste après que le "coller" ait eut lieu ?
	00

30/11/2011, 15h27	#5
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	d'ailleurs pourquoi supprimer les tabulations, c'est ce qui permet sous excel d'envoyer la suite dans la cellule d'à coté me semble t-il?
	00

30/11/2011, 18h50	#7
NoSmoking Modérateur Inscription : janvier 2011 Messages : 2 944 Détails du profil Informations personnelles : Sexe : Localisation : France, Isère (Rhône Alpes) Informations forums : Inscription : janvier 2011 Messages : 2 944 Points : 4 776 Points : 4 776	ta solution ne fonctionnerait que si tu insères en sélectionnant le champ #1 il te faut mettre un window.event.returnValue = false; à la fin de ta fonction pasteCol
	00

01/12/2011, 09h44	#8
Dark_TeToN Membre régulier Inscription : octobre 2006 Messages : 133 Détails du profil Informations forums : Inscription : octobre 2006 Messages : 133 Points : 75 Points : 75	Merci ^^ Ta petite ligne de code a la fin est super !!! Merci beaucoup ! Problème résolu !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email