IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Tabulation et input (pas pour TABINDEX)


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Inscrit en
    Janvier 2011
    Messages
    16
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 16
    Points : 12
    Points
    12
    Par défaut Tabulation et input (pas pour TABINDEX)
    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 !

  2. #2
    Expert confirmé
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Points : 4 164
    Points
    4 164
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var elem = document.getElementById("elem");
    elem.startSelection = elem.value.length - 1;

    ...pour les linguistes et les curieux >>> générateur de phrases aléatoires

    __________________

  3. #3
    Membre à l'essai
    Inscrit en
    Janvier 2011
    Messages
    16
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 16
    Points : 12
    Points
    12
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 ?

  4. #4
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    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.

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    Bonjour,
    Citation 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.

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

  6. #6
    Membre à l'essai
    Inscrit en
    Janvier 2011
    Messages
    16
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 16
    Points : 12
    Points
    12
    Par défaut
    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 !

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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.

  8. #8
    Membre à l'essai
    Inscrit en
    Janvier 2011
    Messages
    16
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 16
    Points : 12
    Points
    12
    Par défaut
    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 ^^

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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.

  10. #10
    Membre à l'essai
    Inscrit en
    Janvier 2011
    Messages
    16
    Détails du profil
    Informations forums :
    Inscription : Janvier 2011
    Messages : 16
    Points : 12
    Points
    12
    Par défaut
    Oui bon ok c'est pas de la bidouille mais ca aurait été bien un truc du genre :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <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") !!

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Proc tabulate ou pas pour créer un produit cartésien
    Par mariem84 dans le forum SAS Base
    Réponses: 6
    Dernier message: 21/06/2012, 12h57
  2. Curseur ne s'affiche pas pour input
    Par taroudant dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 02/07/2008, 09h23
  3. [Performance] - Blob ou pas pour les images d'un site ?
    Par ShinJava dans le forum SQL Procédural
    Réponses: 2
    Dernier message: 04/07/2005, 18h32
  4. Réponses: 13
    Dernier message: 20/07/2004, 09h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo