PHP formulaire

Résolu/Fermé

Angelneonizz Messages postés 784 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 - 12 nov. 2008 à 13:42
Angelneonizz Messages postés 784 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 - 17 nov. 2008 à 08:30

Bonjour,

Je voudrais savoir si il est possible de passer d'un champ de formulaire à un autre avec une autre touche que TAB.

Je m'explique j'ai une page web qui demande une adresse IP les 4 chiffres ont chacun leur textbox et je voudrais pouvoir passer d'une textbox à l'autre en appuyant sur la touche point (.) comme dans les propriétés de la carte réseau sous windows.

Quelqu'un peut il m'aider ? j'ai rien trouvé avec mon ami google faut dire que je ne sais pas vraiment quel mot clé mettre.

Merci d'avance

A voir également:

PHP formulaire
Easy php - Télécharger - Divers Web & Internet
Formulaire de réclamation facebook - Guide
Formulaire remboursement frais de résiliation free pdf ✓ - Forum Vos droits sur internet
Récupérer compte hotmail sans formulaire ✓ - Forum Hotmail / Outlook.com
Confirmer le nouvel envoi du formulaire err_cache_miss ✓ - Forum HTML

16 réponses

Réponse 1 / 16

Utilisateur anonyme
12 nov. 2008 à 13:48

Bonjour,

le mot clé à rechercher est focus

pour le changement de focus regardez du côte de onclick, onchange

Réponse 2 / 16

Angelneonizz Messages postés 784 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
12 nov. 2008 à 14:13

j'y vais de ce pas, merci beaucoup

Réponse 3 / 16

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
12 nov. 2008 à 14:23

Cherche une solution du cote de javascript

principe:

tu mets un appel de fonction onChange sur chaque textbox à laquelle tu passes en argument le nom_du_champ_suivant

cette fonction compte le nombre de caracteres rentrés et qd tu atteint le nombre voulu tu fais

formulaire.nom_champ_suivant.focus()

Réponse 4 / 16

Angelneonizz Messages postés 784 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
14 nov. 2008 à 13:29

merci pour ta proposition mais le problème est qu'il y a 2 ou 2 chiffres selont les adresse IP.

j'ai trouvé peut être une autre fonction OnKeyPress mais je n'y connais rien en JS alors ça met du temps :)

Utilisateur anonyme
14 nov. 2008 à 14:06

Bonjour,
une adresse ip a 1 ou 2 ou 3 chiffres, alors il sera impossible de savoir si l'utilisateur a fini de taper (sauf au 3 ème chiffre).
il est impossible à la machine de deviner si
quand l'utilisateur a marqué 10 , la saisie est finie ou si on veut mettre 102 sauf si il y aune action de la part de l'utilisateur (tab ou enter onKeypress)

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 16

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
14 nov. 2008 à 14:01

Bonjour,
c'est bien onKeyPress la solution, en appelant une fonction qui fait passer le focus au champ suivant.
Le charCode du point est 46...
laisse-moi le temps de chercher un peu et je te proposerai un code javascript.

Réponse 6 / 16

Angelneonizz Messages postés 784 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
14 nov. 2008 à 14:17

merci beaucoup

Réponse 7 / 16

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
14 nov. 2008 à 15:04

Salut,
voilà déjà une solution 100% Firefox (ça ne marche pas sous IE v°v ...), mais j'ai plus du tout le temps, je suis désolé... `·.·'
Je dois t'avouer que je me suis bien marré à la faire, j'avais jamais fait de JS avec les évènements clavier ! ^^

P.S. : J'ai pas mis le DOCTYPE, mais bon c'est juste pour l'exemple ;)

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>test Angelneonizz</title>
<script type="text/javascript">
function changeFocus(e) {
	if (46 == e.which) {
		var next = inputs[inputs.indexOf(this) + 1];
		if (next) 
			next.focus();
		e.preventDefault();
	}
}

function addInputEvent() {
	
	inputs = new Array();
	
	var collect = document.getElementById('ip').getElementsByTagName('input');
	for (var i = 0; i < collect.length; i++) {
		collect.item(i).addEventListener('keypress', changeFocus, false);
		inputs.push(collect.item(i));
	}
}

window.addEventListener('load', addInputEvent, false);
</script>
</head>

<body>
<div id="ip">
	<input type="text" maxlength="3" />.
	<input type="text" maxlength="3" />.
	<input type="text" maxlength="3" />.
	<input type="text" maxlength="3" />
</div>
</body>
</html>

Je t'explique comment ça marche si tu veux ;D

Réponse 8 / 16

Angelneonizz Messages postés 784 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
14 nov. 2008 à 15:17

waou, je m'attendait pas à un truc aussi compliqué, merci beaucoup je vais copier tout ça dans ma page web, par contre au boulot on est tous sur IE6 peux tu me donner les nom des fonctions qui ne marchent pas dans IE que j'essais de trouver autre chose ?

Si j'ai bien compris ton script fonctionne pour le formulaire IP ?

Encore merci d'avoir pris du temps pour moi.

Réponse 9 / 16

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
14 nov. 2008 à 23:39

Hop !
Back to the land, je dispose enfin de IE, j'vais pouvoir t'arranger ça ! ;)
(au passage : j'adore ta devise, jsuis totalement d'accord)
Et c'est pas si compliqué que ça n'y paraît. Tu n'as qu'à regarder le contenu du body : pas un pet de travers !
Le reste n'est qu'une question d'habitude. Il s'agit de gestionnaires d'évènements.
Je les aime car ils permettent de bien séparer le contenu et le comportement :)

Demain la version IE. En attendant, au dessus j'ai dit Firefox, mais en réalité c'est les méthodes standard du DOM ! Donc ça marche aussi avec les versions assez récentes de Konkeror, Safari, Opera, etc... Et IE8 ? Touchons du bois.

Bonne nuit :)

Réponse 10 / 16

Angelneonizz Messages postés 784 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
15 nov. 2008 à 00:47

merci beaucoup, j'ai essayé de faire des recherches sur google avec les différents évènements que tu as utilisé j'ai remplacé par se que j'ai trouvé mais ça ne marche pas.

faudrait que j'essais de me mettre vraiment au java c'est trés utile.

Merci encore !

Réponse 11 / 16

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
15 nov. 2008 à 01:29

C'est Javascript, pas Java. (pour ne pas confondre, dis-toi que Javascript est un langage de script alors que Java est un langage à compilateur, les langages de script ayant la particularité de ne pas avoir de compilateur ^^) La ressemblance était une stratégie marketting de l'alliance entre Netscape, qui a créé Javascript, et Sun Microsystems, dont la machine virtuelle Java était en pleine montée de popularité.

Le problème quand on se cogne les dents avec IE, c'est que les moyens de débuggage sont très pauvres... j'avance à tâtons.

J'ai résolu la question du code clavier (sous IE, e.keyCode au lieu de e.which), du stoppage de propagation (e.returnValue = false au lieu de e.stopPropagation()), mais j'ai l'impression que indexOf() (méthode des tableaux) n'est pas implémentée... va falloir naviguer à la main parmi les inputs. :/

Réponse 12 / 16

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
15 nov. 2008 à 02:31

Voilà, on y est ! Ouf...

Pour indexOf, j'ai trouvé la solution par-ici.
Il y avait un autre problème : l'objet courant d'un évènement n'est pas passé à this sous IE... la solution est par-là. (descendre vers le chapitre consacré à IE, il n'y a pas de lien direct)

Voici donc le code JavaScript final, vérifié sous Opera 9.61, Safari 3.1.2, Firefox 3.0.4 et Internet Explorer 7.0.

/*-------- fonctions de portabilisation du script ----------------------------*/

function addPortableListener(element, evenement, fonction) {
	if (element.addEventListener)
		element.addEventListener(evenement, fonction, false);
	else
		element.attachEvent('on' + evenement, fonction); // # version IE #
} // addPortableListener

// # script tiré de developer.mozilla.org : #
if (!Array.prototype.indexOf) 
{
  Array.prototype.indexOf = function(elt /*, from*/)
  {
    var len = this.length;

    var from = Number(arguments[1]) || 0;
    from = (from < 0)
         ? Math.ceil(from)
         : Math.floor(from);
    if (from < 0)
      from += len;

    for (; from < len; from++)
    {
      if (from in this &&
          this[from] === elt)
        return from;
    }
    return -1;
  };
}

/*-------- fonctions de la page ----------------------------------------------*/

function changeFocus(e) {
	if (46 == e.which || 46 == e.keyCode /* # version IE # */) {
		var target = e.target || e.srcElement; // # tiré de Alsacreations #
		var next = inputs[inputs.indexOf(target) + 1];
		if (next) 
			next.focus();
		if (e.preventDefault)
			e.preventDefault();
		else
			e.returnValue = false; // # version IE #
	}
} // changeFocus

function addInputEvent() {
	
	inputs = new Array();
	
	var collect = document.getElementById('ip').getElementsByTagName('input');
	for (var i = 0; i < collect.length; i++) {
		addPortableListener(collect.item(i), 'keypress', changeFocus);
		inputs.push(collect.item(i));
	}
} // addInputEvent

addPortableListener(window, 'load', addInputEvent);

Explications... demain ! Vais me coucher, je l'ai bien mérité. v_v

Réponse 13 / 16

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
15 nov. 2008 à 10:51

Voilà les explications :

1/ gestionnaires d'évènements : Ceux-là, j'en ai déjà parlé un peu partout, regarde par exemple le mini-tuto que j'ai fait ou bien le lien vers Alsacreations que j'ai mis plus haut.

Donc pour reprendre vite fait le principe : je veux attacher une fonction (ici changeFocus()) à un évènement sur un objet (ici keypress sur les <input>), mais je dois le faire une fois que la page est chargée, sinon l'objet n'existe pas encore. Je crée donc une fonction dont le rôle est d'attacher changeFocus sur les <input>, et cette fonction sera liée à l'évènement load de la page.
En résumé :
a. Je déclare la fonction changeFocus

function chageFocus() { ... }

b. je déclare la fonction qui attache changeFocus aux <input>

function addInputEvent() { ... }

c. j'attache la fonction d'attachement à window

addPortableListener(window, 'load', addInputEvent);

On pourrait s'arrêter là si IE ne foutait pas le dawa... pour ça, il faut inventer une fonction qui remplace la fonction standard : c'est addPortableListener dans mon exemple.

2/ "compléter" les tableaux : Il a fallu que je rajoute également une implémentation "à la main" de la méthode indexOf des tableaux, car elle n'est pas présente sous IE. C'est le passage que j'ai piqué au Mozilla Developer Center :

if (!Array.prototype.indexOf) {
	Array.prototype.indexOf = function ...
}

Le coup du prototype c'est un truc spécial pour intervenir sur tous les objets de la classe. Donc, sur tous les tableaux (la classe Array). (Plus d'infos sur les prototypes) (ne pas confondre avec la Framework Prototype avec un P majuscule)

3/ addInputEvent() : comment attacher la même fonction à tous les <input> simplement ?
Réponse : avec une boucle for ! Je récupère d'abord leur conteneur, histoire de pas aller bidouiller les autres <input> de la page s'il y en a, puis je les récupère sous forme d'une collection d'objets avec la méthode getElementsByTagName. Ce n'est pas vraiment un tableau, il faut passer par item() pour récupérer les objets de la liste...

J'en profite pour les stocker dans un vrai tableau global, inputs, histoire de les garder sous le coude pour la suite.

À suivre... ^^

Réponse 14 / 16

Angelneonizz Messages postés 784 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
15 nov. 2008 à 11:59

Merci beaucoup, j'ai testé chez moi (IE 7) ça marche nickel, je testerais lundi au boulot avec IE 6. Merci aussi pour les explications et d'avoir pris autant de temps.

bonne journée !

Réponse 15 / 16

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
16 nov. 2008 à 01:22

Ok, ben je continue quand même, histoire que ça serve à d'autres. Je pense qu'il restait quelques points à éclaircir à propos de la fonction changeFocus(), que je remets ici :

function changeFocus(e) {
	if (46 == e.which || 46 == e.keyCode /* # version IE # */) {
		var target = e.target || e.srcElement; // # tiré de Alsacreations #
		var next = inputs[inputs.indexOf(target) + 1];
		if (next) 
			next.focus();
		if (e.preventDefault)
			e.preventDefault();
		else
			e.returnValue = false; // # version IE #
	}
} // changeFocus

4/ l'argument e passé à la fonction changeFocus(), what the hell is that ?
Il s'agit d'une instance de Event, autrement dit c'est un objet contenant toutes les informations sur l'évènement qui vient d'être déclenché. Mais pourtant, aucun argument n'a été passé à changeFocus(), alors d'où vient-il !?
En fait, il est automatiquement passé en premier argument lorsqu'on utilise un gestionnaire d'évènement. On peut lui donner le nom qu'on veut... Moi j'ai mis e, plus court tu meurs ! ^^

5/ on commence à patauger avec IE... Bon on a déjà de la chance que IE connaisse l'objet Event. Le problème c'est qu'il n'a pas du tout donné les mêmes noms à ses propriétés !
Premièrement, il faut vérifier que le code de la touche clavier correspond au point (code 46). En standard ce sera e.which, alors que sous IE ce sera e.keyCode. On peut tester les deux en même temps, c'est plus court :

if (46 == e.which || 46 == e.keyCode)

Tout le contenu de la fonction ne sera executé que si ce test est positif.

6/ passer à l'<input> suivant : c'est là que la fameuse méthode focus() est enfin utilisée.
Cependant, on n'y est pas encore, car IE nous gardait quelques surprises... Eh oui, en version standard, je pouvais retrouver quel élément HTML avait déclenché l'évènement, car il était porté par la variable this. Que dalle avec IE !!
Heureusement, la solution existe, et provient de Alsacréa' :

var target = e.target || e.srcElement;

e.target est la méthode standard (il paraît qu'il ne faut pas le faire avec this en fait :S) tandis que e.srcElement est la version IE. Si e.target ne marche pas, on tente le coup avec e.srclEment , et on se retrouve dans les 2 cas avec le même élément de départ !

Une fois le bon <input> récupéré, on cherche sa position dans le tableau inputs (celui que j'avais gardé sous le coude ^^) avec la méthode indexOf() (rajoutée ou pas, voir §. 2/), et on fait juste +1 pour le suivant... Exemple :
je suis sur le 2e <input>, je tape un point
-> l'indice de l'<input> est récupéré : inputs.indexOf(target) =2
-> +1 =3
-> je retrouve le 3e en réutilisant le tableau : inputs[3]

Ce qui donne une ligne super-condensée :

var next = inputs[inputs.indexOf(target) + 1];

On fait juste un petit test pour savoir s'il y a un <input> suivant, sinon ça veut dire qu'on est sur le dernier, et donc c'est pas la peine. Et on finit par appeler, enfin, la méthode :

next.focus();

Hourrah !

7/ détail optionnel... ne pas afficher le point. Il suffit d'annuler l'évènement. La méthode standard est e.preventDefault(), alors que la version IE n'est pas une méthode mais un booléen, e.returnValue, que l'on doit passer à false. Reste plus qu'à faire un 'tit test :

if (e.preventDefault)
	e.preventDefault();
else
	e.returnValue = false;

Voilà c'est la fin !
S'il y a des questions, n'hésitez pas, n'importe qui, demandez ;)

Réponse 16 / 16

Angelneonizz Messages postés 784 Date d'inscription mardi 9 décembre 2003 Statut Membre Dernière intervention 19 février 2018 137
17 nov. 2008 à 08:30

merci beaucoup pour toutes ces explications.

ET ça marche aussi avec IE6, MERCI !!!!!!!!!!

Discussions similaires

ALERT en php

Compte HOTMAIL bloqué . Que faire ?

balise de retour à la ligne en php

Contacter le "bon coin"

que veut dire php natif

Discussions similaires

Newsletters