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

Webdesign & Ergonomie Discussion :

Ancre appelable en saisie directe au clavier.


Sujet :

Webdesign & Ergonomie

  1. #1
    Membre à l'essai
    Ancre appelable en saisie directe au clavier.
    Bonjour,

    je vais essayer d'expliquer ce que je cherche à faire pour que ça soit compréhensible

    j'ai une page qui affiche des valeurs alphabétique d'une base de données sous forme de tableau classé alphabétiquement sur la colonne 1. ce tableau pouvant être très long, j'aimerai pouvoir accéder à la zone des valeurs commençant par une certaine lettre en tapant cette lettre sur le clavier plutôt que de faire défiler le tableau.
    par ex: je suis en haut de mon tableau à la lettre A et je tape sur mon clavier la lettre R. la page doit alors défiler automatiquement jusqu'au valeur commençant par la lettre R ( défiler ou directement placer le R en haut de mon écran).
    je n'ai pas énormément de connaissance en dev. web et je me tourne donc vers vous pour avoir des pistes.

    Merci et joyeuses Cloches !

  2. #2
    Membre habitué
    Salut,

    Il te faudra du javascript.
    Essaie de regarder du coté de l'événement keydown (keypress étant déprécié par les dernières versions de Chrome)
    Au keydown tu détectes le keycode de ta touche de clavier, et après tu fais un défilement vers l'endroit souhaité.

    Le mieux serait d'intégrer dans ton table un id ou un data-value contenant ta lettre pour faire un défilement jusqu'à cette endroit.
    Exemple : id="id-r" ou bien data-value="r"

  3. #3
    Membre à l'essai
    merci pour ta réponse . qui confirme l'orientation que j'imaginais. je ne note dans un coin la dépreciation du keypress

    Autre point en rapport avec ces retours JS, il me semble que ce sont les codes des touches qui sont renvoyés. j'imagine qu'il faudra donc ajouter une boucle de conversion pour ensuite aller sur la bonne balise? ou peut-on récupérer directement le caractère de la touche?

  4. #4
    Membre habitué
    Non, normalement event.key te récupèrera ta lettre.
    event.keycode te récupèrera le code.

  5. #5
    Membre à l'essai
    ok merci pour l'info,

    je test ça ce soir et je repasse par ici

    bonne journée !

  6. #6
    Membre à l'essai
    Ok donc j'arrive a récupérer mes frappes et à faire défiler ma page comme imaginé . super !

    Le problème que je rencontre maintenant est le suivant : j'ai sur cette page des cases input avec un texte que je peux modifier . Hors, quand je clic dans la case et que je veux taper du texte, mes ancres prennent la priorité.

    d'où l'a question suivante : comment désactiver la fonction javascript quand je suis dans une case input

  7. #7
    Membre à l'essai
    bonjour à vous,

    je me permet de déterrer mon sujet vieux d'un mois car je n'ai toujours pas trouvé de solution pour ce qui concerne la partie des focus.

    pour rappel, je cherche à utiliser ma fonction de renvoie vers l' ancre de la page correspondant à la lettre tapée seulement quand je ne suis pas dans un input.

    voici le code que j'ai actuellement:
    Code js :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
    <script language ="javascript"> 
        document.onkeydown = applyKey; 
     
        function checkEventObj ( _event_ ){ 
            // --- IE explorer 
            if ( window.event ) return window.event; 
            // --- Netscape and other explorers 
            else return _event_; 
        } 
     
        function applyKey (_event_){ // --- Retrieve event object from current web explorer 
            var winObj = checkEventObj(_event_); 
     
            window.location.href="#"+winObj.key; 
        }
    </script>


    j'imagine qu'il faudrait mettre mon renvoi de touche dans une condition sur le focus actuel. mais je ne sais pas comment le récupérer.

    bonne journée

  8. #8
    Modérateur

    Bonjour,
    tu peux toujours regarder qui est à l'origine du keyDown, regarde qui est l'event.target si c'est un <input> tu ne fais rien sinon tu fais.

  9. #9
    Membre à l'essai
    bonjour et merci pour ton retour.

    je fais mes petits tests ce soir et reviens par là !

    bonne journée

  10. #10
    Membre à l'essai
    Et bien ... ça fonctionne parfaitement!

    si dans mon script winObj.target vaut "[object HTMLInputElement]" je ne fais rien, sinon je fais ma fonction.

    Un grand merci pour cette réponse simple et efficace !

###raw>template_hook.ano_emploi###