Tabulation et input (pas pour TABINDEX)

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

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 :

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

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

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 :

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

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.