PHP formulaire Résolu/Fermé

Question

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

giheller · Answer

Bonjour,

le mot clé à rechercher est focus

pour le changement de focus regardez du côte de onclick, onchange

Angelneonizz · Answer

j'y vais de ce pas, merci beaucoup

Alain_42 · Answer

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()

Angelneonizz · Answer

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 :)

Groarh · Answer

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.

Angelneonizz · Answer

merci beaucoup

Groarh · Answer

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 ;) test Angelneonizz

. . .

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

Angelneonizz · Answer

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.

Groarh · Answer

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 :)

Angelneonizz · Answer

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 !

Groarh · Answer

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. :/

Groarh · Answer

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

Groarh · Answer

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 ), 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 , et cette fonction sera liée à l'évènement load de la page. En résumé : a. Je déclare la fonction changeFocusfunction chageFocus() { ... } b. je déclare la fonction qui attache changeFocus aux function addInputEvent() { ... } c. j'attache la fonction d'attachement à windowaddPortableListener(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 simplement ? Réponse : avec une boucle for ! Je récupère d'abord leur conteneur, histoire de pas aller bidouiller les autres 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... ^^

Angelneonizz · Answer

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 !

Groarh · Answer

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' 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 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 , je tape un point -> l'indice de l' 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 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 ;)

Angelneonizz · Answer

merci beaucoup pour toutes ces explications.

ET ça marche aussi avec IE6, MERCI !!!!!!!!!!

PHP formulaire

16 réponses

Discussions similaires