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
    Homme Profil pro
    architecte
    Inscrit en
    avril 2016
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : architecte
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2016
    Messages : 30
    Points : 16
    Points
    16
    Par défaut 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é
    Avatar de Mell
    Femme Profil pro
    Développeuse Front-end
    Inscrit en
    janvier 2011
    Messages
    107
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 28
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeuse Front-end
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : janvier 2011
    Messages : 107
    Points : 143
    Points
    143
    Par défaut
    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
    Homme Profil pro
    architecte
    Inscrit en
    avril 2016
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : architecte
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2016
    Messages : 30
    Points : 16
    Points
    16
    Par défaut
    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é
    Avatar de Mell
    Femme Profil pro
    Développeuse Front-end
    Inscrit en
    janvier 2011
    Messages
    107
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 28
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeuse Front-end
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : janvier 2011
    Messages : 107
    Points : 143
    Points
    143
    Par défaut
    Non, normalement event.key te récupèrera ta lettre.
    event.keycode te récupèrera le code.

  5. #5
    Membre à l'essai
    Homme Profil pro
    architecte
    Inscrit en
    avril 2016
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : architecte
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2016
    Messages : 30
    Points : 16
    Points
    16
    Par défaut
    ok merci pour l'info,

    je test ça ce soir et je repasse par ici

    bonne journée !

  6. #6
    Membre à l'essai
    Homme Profil pro
    architecte
    Inscrit en
    avril 2016
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : architecte
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2016
    Messages : 30
    Points : 16
    Points
    16
    Par défaut
    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
    Homme Profil pro
    architecte
    Inscrit en
    avril 2016
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : architecte
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2016
    Messages : 30
    Points : 16
    Points
    16
    Par défaut
    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

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

    Informations forums :
    Inscription : janvier 2011
    Messages : 14 106
    Points : 34 817
    Points
    34 817
    Par défaut
    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
    Homme Profil pro
    architecte
    Inscrit en
    avril 2016
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : architecte
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2016
    Messages : 30
    Points : 16
    Points
    16
    Par défaut
    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
    Homme Profil pro
    architecte
    Inscrit en
    avril 2016
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : architecte
    Secteur : Bâtiment

    Informations forums :
    Inscription : avril 2016
    Messages : 30
    Points : 16
    Points
    16
    Par défaut
    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 !

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

Discussions similaires

  1. Saisie directe en majuscule
    Par marc56 dans le forum Excel
    Réponses: 4
    Dernier message: 16/08/2007, 15h08
  2. Réponses: 5
    Dernier message: 03/07/2007, 11h25
  3. [C# VS 2005]Saisie direct dans listview
    Par omgirl dans le forum C#
    Réponses: 3
    Dernier message: 07/03/2007, 12h24
  4. Saisie interdite au clavier
    Par maminova dans le forum Composants
    Réponses: 4
    Dernier message: 12/12/2005, 04h31
  5. cacher la saisie tappée au clavier
    Par pierrot512 dans le forum C++
    Réponses: 3
    Dernier message: 13/12/2004, 22h46

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