modifier la touche [entrée] dans un formulaire

**troumad** · 04/12/2007, 22h14

Bonsoir

Je me pose une question métaphysique...
Je souhaite faire une petite page php pour modifier une base de données.
Celle-ci se présente comme un tableau avec des cases préremplies à modifier : un formulaire (balise form).

Je pense qu'il serait utile/agréable pour l'utilisateur habitué à un tableur que la touche entrée ne valide pas le formulaire, mais fasse passer à la casse suivante.

Est-ce faisable ? Est-ce un machin tellement courant que ma question vous semble idiote ?
Est-ce sans espoir ?

**jln13** · 04/12/2007, 22h20

salut,

tu peux facilement en javascript... le code de la touche entree est 13 je crois si je me rappelle bien

edit :

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
 
<html>
<head>
	<script type="text/javascript">
	function mafonction(e) {
		if (window.event) {e=event;} // IE
		if(e.keyCode == 13) {
			alert("entree");
		}
	}
	</script>
</head>
<body onkeypress="javascript:mafonction(event);">
 
</body>
</html>

**troumad** · 04/12/2007, 22h58

Merci, ça progresse

Maintenant, il me faut :
1) simuler l'appui sur la touche Tab
2) rajouter onkeypress="javascript:mafonction(event);" sans accéder à la balise <body> qui est définie dans un autre document.

Je trouverais peut-être facilement après une nuit de sommeil

**Shinuza** · 05/12/2007, 02h23

Salut,

J'ai fais ça y'a 6 mois, c'est loin d'être top, mais ça fait la blague :

http://verybadman.free.fr/editable/

**troumad** · 05/12/2007, 09h49

Envoyé par Shinuza

http://verybadman.free.fr/editable/

Pas mal !
Ce n'est pas tout à fait ce que je cherche.
Tu ne rediriges pas la touche [Entrée].
Par contre, ton code me montre que je ne maitrise pas tout

. Surtout dans http://verybadman.free.fr/editable/application.js où je ne vois pas pourquoi tu as mis des fonctions dans une fonction et je ne sais pas non plus ce que représente tes $ dans

Code :

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

1
2
			var tb = $(tableId),
			tds = $t(tb,"td");

Autre remarque : pourquoi n'alignes-tu pas tes { avec tes } ? Tu trouves que c'est plus lisible ?
Pour ma part, j'aime bien quand je vois un { voir rapidement où il se ferme : le } qui est en dessous. De même avec le { , je cherche celui qui est au dessus.

Code :

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

1
2
3
4
5
6
 dsqfqsf
 hghdgj
 {
        mpofjumoigh
        slqijfaeslfuqo
 }

**Shinuza** · 05/12/2007, 12h51

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
function $(el){
			return document.getElementById(el);
		}
 
		function $t(el,tag) {
				return el.getElementsByTagName(tag);
		}
 
		function $c(nodeSet,cName) {
			var i  = 0,
				el = nodeSet[i],
				sortedNodeSet = [];
 
			while(el) {
				if(el.nodeName == "#text") {
					i++;
					el = nodeSet[i];
					continue;	
				}
				if(el.className == cName) {
					sortedNodeSet.push(el);
				}
				i++;	
				el = nodeSet[i];
 
			}
			return sortedNodeSet;
		}

$() -> GetElementById
$t() -> GetElementsByTagName
$c() -> GetElementsByClassName

Le script n'est bien sur pas ce que tu demandes, il faut l'adapter, changer le code touche (tab) pour celui de la touche éntrée.

Ensuite ça dépend de ce que tu veux faire en terme d'ergo

**SpaceFrog** · 05/12/2007, 12h58

plus simplement:
ne mets pas de bouton submit et remplace le par

Code :

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

<input type='button' onclick='this.form.submit()' value="envoyer" />

la touche enter ne validera plus le form ...

**troumad** · 05/12/2007, 13h49

Ceci évite au moins la validation avec la touche entrée !
Maintenant, il va falloir que je modifie l'action de la touche [entrée] qui devra renvoyer sur l'item suivant.

**SpaceFrog** · 05/12/2007, 13h54

j'ai collé un truc dans les codes sources sufit de capter la touche entrée et de jouer avec les tabIndex ...

**troumad** · 05/12/2007, 15h09

Envoyé par SpaceFrog

j'ai collé un truc dans les codes sources sufit de capter la touche entrée et de jouer avec les tabIndex ...

Où ça ?
Dans http://javascript.developpez.com/sources/ ? Je n'ai pas trouvé ?

**SpaceFrog** · 05/12/2007, 15h25

peut être dans la FAQ alors ... ?

http://javascript.developpez.com/faq...js#TexteSuivat

là c'est sur la taille max mais suffit de l'adapter ..

**troumad** · 05/12/2007, 15h32

J'avais vu ce script. Mais, il impose de connaitre avec une variable globale la case où on est.
C'est une méthode que je prévois d'envisager.

**SpaceFrog** · 05/12/2007, 15h35

y'a pas de hasFocus en javascript ...

**troumad** · 05/12/2007, 16h53

Envoyé par SpaceFrog

y'a pas de hasFocus en javascript ...

Bon, et bien dans ce cas, je suis sûr que mon problème est insolvable comme je comptais le faire !
Malgrès ceci, je vais mettre une balise

**troumad** · 05/12/2007, 17h21

Partie sur toutes les pages :

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">
//<![CDATA[
//document.onkeypress=mafonction;
 suivant=0;
 clef=new Array();
 
 function va_suivant(e)
 {
  if (window.event) {e=event;} // IE
  if (clef.inArray(e.keyCode))
   document.forms[0].elements[suivant].focus();
 }//]]>
</script>
 </head>
 <body onkeypress="javascript:va_suivant(event);">

Partie insérée sur la page qui en a besoin :

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
clef[0]=13;
suivant=0;
 
//]]>
</script>
<tr>
 <td><input type='text' name='nom' size='10' onfocus="suivant=this.form.elements.length-6;" onvalue='<? echo $entree_POST['nom'] ?>'/></td>
 <td><input type='text' name='lire' size='2' onfocus="suivant=this.form.elements.length-5;" value='<? echo $entree_POST['lire'] ?>' /></td>
 <td><input type='text' size='10' onfocus="suivant=this.form.elements.length-4;;" name='mdp' /></td>
 <td><textarea name='module' rows='2' cols='45' value='<? echo $entree_POST['module'] ?>' onfocus="suivant=this.form.elements.length-1;" /></textarea></td>
 <td><input type='radio' name='choix' value='in_' /></td>
 <td>&nbsp;</td></tr>
</table>
<p><input type='button' onclick='this.form.submit()' value="envoyer" />&nbsp;<input type="reset" name ="neuf" value="Annuler" /></p>
</form>

modifier la touche [entrée] dans un formulaire

JavaScript

Discussions similaires

Partager

Partager