Tabulation et input (pas pour TABINDEX) [Résolu]

[kwyzix]

Bonjour, Je ne trouve pas de solution a mon probleme :
J'ai une page xhtml avec des input text. Quand j'appuis sur TAB ca passe d'un champ au champ suivant sauf que ca me selectionne tout le texte de mon input.
Je voudrais que TAB ne me selectionne pas le texte que j'ai dans mon input et que le curseur (clavier) se mette a la fin de mon texte.
Est ce possible ?

exemple : j'ai 2 champs; dans le champ1 il y a ecrit "toto" et dans le champ2 il y a ecrit "tutu". Quand je suis dans le champ1 je fait TAB. Je me retrouve dans mon champ2 avec "tutu" selectionner !! si bien que quand j’appuie sur la touche "a" ca m'efface "tutu" et m'ecrit "a" a la place ! Moi je voudrais que quand j'appuie sur "a" ca fasse "tutua".


j'utilise Chrome (derniere version)

Merci d'avance !

[RomainVALERI]

Tu trouveras probablement cette discussion intéressante
(si tu n'es pas anglophone ou que tu as du mal à l'adapter chez toi pour une quelconque raison... n'hésite pas ^^)

Sur FF/Chrome, ça devrait ressembler à quelque chose comme :

Code :

1
2
var elem = document.getElementById("elem");
elem.startSelection = elem.value.length - 1;

[kwyzix]

Merci RomainVALERI, J'ai essayé ta solution dans tous les sens mais ca marche pas ! j'ai vu aussi d'autre facon de le faire mais rien y fait !!
voila mon code :

Code :

1
2
3
4
5
6
7
8
9
10
<table class="tables">
<tr>
   <td class="tdlabel" >
      <label for="precision">precision : </label>
   </td>
 
   <td class="tdinput">
      <input type="text" class="saisie" name="precision" id="precision" value="test" autocomplete="off"  onfocus="this.SelectionStart=1;this.SelectionEnd=2; " />
   </td>
</table>

donc voila mon input. Il est mis dans une table pour un soucis esthétique. J'ai voulu pour faire simple selectionner le 2eme caractere de "test" quand le input prend le focus ! mais ca marche pas !!!
Des idées ?

[vermine]

Bonjour,

Tout d'abord il manque un </tr> mais je suppose que c'est simplement un code d'exemple. Ensuite faites attention au nom que vous donnez. Il y a l'input avec l'id precision, ainsi que le label avec le for precision.

[NoSmoking]

Bonjour,

Envoyé par kwyzix

Je voudrais que TAB ne me selectionne pas le texte que j'ai dans mon input et que le curseur (clavier) se mette a la fin de mon texte.

La sélection du texte, lorsqu'un contrôle prend le focus, est le comportement par défaut sur tous les navigateurs.

Envoyé par kwyzix

Code :

...onfocus="this.SelectionStart=1;this.SelectionEnd=2; " />

non compatible avec IE < 9 sous sa véritable écriture selectionStart et selectionEnd.

Ceci c'est sans compter l'action par défaut des navigateurs qui fait que le placement du curseur est annulé par la sélection par défaut, ceci n'est bien sûr valable que dans le cas d'une sélection par déplacement au clavier et non par un click dans la zone, qui déclenche, au passage, un événement onfocus.

Il existe , sur la toile, un certains nombre de fonction de placement de curseur mais ne tenant pas compte de cet effet de bord, il est vrai que la demande est singulière dans le sens où tu vas à l'inverse du comportement naturel des navigateurs.

Je noterai aussi que cette effet ne se produit pas sur des champs de type TEXTAREA.

[kwyzix]

Hello !

Bon ben j'ai essayé toutes sortes de fonction pour tenter de faire ce que je veux mais rien a faire ! rien ne marche !!
Je ne sais pas si c'est moi qui ai une configuration particulière qui fait que ca marche pas ou si c'est pour tout le monde pareil !!?? y en a t'il parmi vous qui sont arrivé a faire ce que je veux ? Pour info mon navigateur est Chrome et c'est pour une appli intranet donc c'est pas grave si ca marche pas sous un autre navigateur ! mais si il faut que je change de navigateur pour arriver a mes fins, c'est possible aussi !
Merci Vermine et Nosmoking pour vos infos ! une autre petite question pour peut etre comprendre pourquoi ca marche pas : Souvent dans les exemples que je trouve sur la toile pour faire ce que je veux, ils créent un bouton qui va executer la fontion pour mettre le curseur a la fin d'une zone de saisie ! mais je n'en trouve pas qui mettent ca direct dans un onfocus de la saisie en question. Le 'onfocus' de la saisie, se fait elle AVANT l'action par défaut du navigateur ou APRES ? est si c'est AVANT, comment surcharger l'action par defaut du navigateur ?
D'avance merci !

[NoSmoking]

Le 'onfocus' de la saisie, se fait elle AVANT l'action par défaut du navigateur ou APRES ?

il faut distinguer 2 choses, le focus lié au déplacement par la touche TAB et le focus lié au click via la mouse.

• Via touche TAB, un seul événement est déclenché, le onfocus
• Via la mouse, on a dans l'ordre, onmousedown, onfocus et onclick

La problèmatique est qu'effectivement lorsque tu affectes une fonction sur l'événement onfocus, il semblerait que celle ci soit prise en compte avant l'action par défaut.

Il existe une solution, que j'ai déjà expérimentée, à savoir l'utilisation de setTimeout.

Il suffit sur l'événement onfocus de mettre un setTimeout porteur de la fonction de positionnement.
Il y a un effet de bord dans ce cas, si tu accèdes au champ via un click de la mouse la fonction s'exécute quand même, l'astuce est dans ce cas de couper court au setTimeout.

Compte tenu de ce que je viens d'écrire, et si l'on veut quand même avoir un comportement, presque, normal lorsque l'on clique, il est préférable d'ajouter une action sur les événements onfocus ET onclick, ce qui je l'admet est difficile à placer dans la balise, et quoiqu'il arrive pas très classe.

Dans ton cas je pense qu'il est souhaitable, je me trompe sûrement, de traiter tous tes inputs en fin de chargement de la page soit sur le onload du window.

Pour commencer, la fonction de setCursorPosition, une parmi des 10...

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function setCursorPosition( obj, pos){
  // get l'element
  var oText = (typeof obj === 'object') ? obj : document.getElementById(obj);
  // position curseur end si pas d'info
  pos = pos || oText.value.length || 0;
  // si existe
  if( oText){
    // mise du focus
    oText.focus();
    // en direct si supporte
    if( typeof oText.selectionStart != "undefined"){
      oText.setSelectionRange( pos, pos);
    }
    // IE and consort
    else{
      // create range
      var oRange = oText.createTextRange();
      // deplacement curseur
      oRange.move('character', pos);
      // select this
      oRange.select();
    }
  }
}

c'est une classique avec des variantes d'écriture et de prise en compte des actions par défaut...

Maintenant il suffit de traiter les INPUT concernés sur le onload, par exemple

Code :

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
window.onload = function(){
  // get parent
  var oMain = document.getElementById('div_main');
  //---------
  if( oMain){
    var i, nb, oCtr, oInput = oMain.getElementsByTagName('input');
    for( i = 0, nb = oInput.length; i < nb; i++){
      oCtr = oInput[i];
      // affectation du setTimeout sur onfocus
      oCtr.onfocus = (function(obj) {
          return function(){
            obj.iTimer = setTimeout( function(){
              setCursorPosition( obj, obj.value.length); // obj.value.length facultatif
            },
            200); // attention ne pas mettre trop court
          };
        }
      )(oCtr);
      // affectation du clearTimeout sur onclik
      oCtr.onclick = function(){
        clearTimeout( this.iTimer);
      };
    }
  }
};

il serait plus mieux de mettre en addEvent, mais bon...

J'espère avoir répondu le plus clairement possible, je cours prendre une aspirine.

[kwyzix]

YEEEESSSS !! Super ca marche nickel !! Merci NoSmoking !
C'est une solution un peu bidouille mais ca marche !
Si un de ces 4 tu vois une meilleur solution (moins bidouille) je suis preneur

Merci encore !! ca faisait un semaine que je galerais avec ce truc ^^

[NoSmoking]

YEEEESSSS !! Super ca marche nickel !! Merci NoSmoking !

je devais avoir la tête dans le sceau quand je t'ai proposé cela.
Je m'explique
...dans l'ordre d'apparition des événements on trouve mouseover, focus etc...
il est donc stupide de faire un clearTimeout sur le click, autant bloquer l'action sur le onmousedown, en plus l'effet à l'écran devrait être plus fluide et moins capricieux en cas de click prolongé.

Cela donne la fonction sur le onload, légérement changée, suivante

Code :

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
window.onload =  function(){
  // get parent
  var oMain = document.getElementById('div_main');
  //---------
  if( oMain){
    var i, nb, oCtr, oInput = oMain.getElementsByTagName('input');
    for( i = 0, nb = oInput.length; i < nb; i++){
      oCtr = oInput[i];
 
      oCtr.onmousedown = function(){
        this.bFlag = true;
      };
 
      oCtr.onfocus = (function(obj) {
        return function(){
          if( !obj.bFlag){
            setTimeout( function(){
              setCursorPosition( obj, obj.value.length);},
            1); // 1 est suffisant pour retarder l'appel de la  fonction
          }
          obj.bFlag = false;
        };
      })(oCtr);
    }
  }
};

C'est une solution un peu bidouille mais ca marche !
Si un de ces 4 tu vois une meilleur solution (moins bidouille) je suis preneur

je ne vois aucune bidouille là dedans, tout au plus un aménagement du comportement par défaut des navigateurs.

[kwyzix]

Oui bon ok c'est pas de la bidouille mais ca aurait été bien un truc du genre :

Code html :

<input type="text" value="bonjour" onfocus="setCursorPosition( -1 )">

et hop ca marche ^^ !!
Mais ta solution marche alors je me plaint pas et te remercie encore !!
Par contre comment je fait si je ne veux sélectionner que les "input" de type text ou int au lieu de tout les "input" dans ta fonction ? car la fonction me fait quelques problemes avec les "button" ( je pense que le setimeout() n'est pas prévu pour les "button") !!

[NoSmoking]

Oui bon ok c'est pas de la bidouille mais ca aurait été bien un truc du genre :
<input type="text" value="bonjour" onfocus="setCursorPosition( -1 )">
et hop ca marche ^^ !!

il est moins propre d'écrire cela que ce que je t'ai mis, séparation du javascript du HTML.

Néanmoins tu peux toujours créer une fonction tampon, par exemple setCursorEnd, qui elle se charge du d'appeler setCursorPosition via setTimeout.

Par contre comment je fait si je ne veux sélectionner que les "input" de type text ou int au lieu de tout les "input" dans ta fonction ?

dans la fonction qui se trouve sur le onload tu testes le type d'input, si c'est un type text tu appliques sinon tu passes ton chemin.

...car la fonction me fait quelques problemes avec les "button" ( je pense que le setimeout() n'est pas prévu pour les "button") !!

la fonction n'est pas appelée sur les button, car on ne récupère que les INPUT.