Navigation simulant la touche tab

par **jojolapine** » 24 janv. 2007, 17:57

ah c'est vrai que j'ai essayer que sous ff et ie7... je retourne mettre les mains dans la *****

par **Ryle** » 24 janv. 2007, 17:44

Arf, désolé, j'aurais pu t'éviter de la chercher celle là, d'habitude j'en colle partout des capitales

(Ca m'apprendra à faire des copier/coller)

Par contre j'ai un doute sur la possibilité (et la compatibilité) du form.length et form sans passer par le tableau elements[] ... m'enfin si ca fonctionne

par **jojolapine** » 24 janv. 2007, 17:21

Merci beaucoup beaucoup!!
j'ai débugger ton code (;-)) et ça fonctionne! impec! (au passage la propriété max length s'atteind par obj.maxLength -majuscule-, j'ai mis un moment avant de trouver cette faute)....
voici le code final des fonctions:

function changeInput(obj) {
  if(obj.value.length==obj.maxLength){
    var index = getIndex(obj); // index de l'élément
    if(index!=-1)
      obj.form[index+1].focus();  // focus sur l'élément suivant
  }  
} 
function getIndex(obj) {
  var index = -1;
  for (var i=0; i < obj.form.length; i++) { 
    if (obj.form[i] == obj) {
      index = i; 
      break;
    }
  }
  return index;
}

[résolu]

par **Ryle** » 24 janv. 2007, 16:56

Yep, c'est un peu dans ce gout là... en fait il faut chercher l'index (la position) du champ dans le formulaire, et puisque tes champs dates sont à la suite, passer de l'un à l'autre :

/**
 * retourne l'index de l'objet input passé en paramètre (-1 si non trouvé)
 */
function getIndex(obj) {
  var index = -1;
  for (var i=0; i < input.form.elements.length; i++) { 
    if (obj.form.elements[i] == obj) {
      index = i; 
      break;
    }
  }
  return index;
}

function changeInput(obj) {
  if(obj.value.length==obj.maxlength){
    var index = getIndex(obj); // index de l'élément
    if(index!=-1)
      obj.form.elements[index+1].focus();  // focus sur l'élément suivant
  }  
}

A tester, mais ce serait quelque chose dans ce goût là

par **jojolapine** » 24 janv. 2007, 16:08

Nickel!

j'ai appliqué tes préceptes (je vais peut-être un peu loin là

) et tout fonctionne au poil...
Ya juste le coup de ne pas se servir d'id que je n'arrive pas en mettre en place...
ça serait avec une notation de la forme

Code : Tout sélectionner

objform[i]

ou alors je me gourre ?

par **Ryle** » 24 janv. 2007, 12:09

Au lieu de faire un (longueur-1), execute la fonction sur le onKeyUp, ca sera plus simple

Et comme tu as une longueur définie dans ton champ, tu devrais coller un maxlength (pour limiter la saisie et éviter un numéro de mois de 3 chiffres

) et l'utiliser comme longueur de ta fonction.
Du coup je passerais l'objet this à ta fonction pour récupérer ces deux valeurs et plus s'en soucier ensuite

<input onKeyUp="changeInput(this, 'input2');" ... />

function changeInput(obj, id_suivant) { 
  if(obj.value.length==obj.maxlength){ 
    document.getElementById(id_suivant).focus(); 
  } 
}

En fait, en récupérant l'index du champ dans le formulaire, tu ne serais même pas obligé de mettre d'id à tes champs, il te suffirait d'augmenter l'index pour passer au suivant

Pour le select() c'est juste pour selectionné le texte contenu dans le champ lors du focus. Ca permet de supprimer le contenu dès la frappe de la nouvelle valeur, sans avoir à faire de suppr ou de delete.
Mes utilisateurs apprécient car ils vont généralement plus vite de ressaisir la chaine (quand il s'agit d'une date) que de la corriger (en se positionnant sur le bon caractère, ou en supprimant ceux erronés, etc.)

par **jojolapine** » 24 janv. 2007, 11:40

pour l'instant, j'ai fait ça (et ça fonctionne

)
fonction changeInput():

function changeInput(valeur,longueur,id_suivant) {
  if(valeur.length==(longueur-1)){
    document.getElementById(id_suivant).focus();
  }
}

et le code html:

<input onkeypress="changeInput(this.value,2,'input2');" ... />
<input id="input2" onkeypress="changeInput(this.value,2,'input3');" ... />
etc...

Bon ça m'oblige à rajouter des ids à mes champs...

Et pis tant que tu y es, tu peux aussi coller un onFocus="this.select();" ça leur fera plaisir

j'ai pas trop compris ce que tu voulais dire ?

par **Ryle** » 24 janv. 2007, 11:35

J'ai pas trouvé de meilleure solution

Pis c'est pas si lourd, juste un peu compliqué à maintenir si tes noms de champs changent, mais c'est pas pire que le tabindex :

Code : Tout sélectionner

onKeyUp="if(this.length==this.maxlength) document.form.champ_suivant.focus();"

Et pis tant que tu y es, tu peux aussi coller un onFocus="this.select();" ça leur fera plaisir

par **jojolapine** » 24 janv. 2007, 11:13

Bonjour à tous,
je souhaite aider mes utilisateurs à remplir un formulaire...
Concrètement, j'ai des champs date1/date2/date3 contenant respectivement le jour le mois et l'année d'une date...
Bon jusque là tout va bien...
Seulement une paire de fainéants m'ont dits:
"dis-donc ça serait cool si le curseur passait tout seul à la case d'après!!"
Bon ben moi je dit oui bien sur

(bien qu'avec tab se soit très simple mais bon)
Donc la première solution que j'avais envisagée (simple mais un peu lourde)...
C'est de faire une verification avec onKeypress, et si la valeur rentrée fait plus de deux caractères, alors je passe à l'input suivant (à l'aide de focus())
mais je me suis demandé si il n'éxistait pas un moyen de simuler l'appui de la touche tab (qui change de champs) ?
Bon c'est un peu brouillon, mais c'est à l'image de ce que j'ai dans la tête

Merci d'avance

Navigation simulant la touche tab

Répondre

Étendre la vue Revue du sujet : Navigation simulant la touche tab

Navigation simulant la touche tab