ouverture panneau latéral avec la touche "entrée"

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu ouverture panneau latéral avec la touche "entrée"

Message par MlleAlys le Dim 8 Mar 2015 - 19:03

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://forum-test-phpbb2.forumactif.org/

Description du problème

Bonjour,

Je travaille sur la navigation au clavier, notamment avec la touche tabulation, sur mes forums, et si j'arrive à ajouter les liens à la tabulation, modifier l'ordre, etc, je ne sais pas comment faire pour faire en sorte que tout ce qui fonctionne "onclick" fonctionne également avec la touche "entrée" ?

Plus simplement, j'ai ajouté le panneau coulissant à mon forum test, ajouté tabindex="1" dans la balise de l'image pour pouvoir "focuser" dessus, comment faire pour ouvrir (et fermer) la cb grâce à la touche "entrée" une fois qu'on est en focus dessus, de la même façon qu'en cliquant dessus ?

Le code du panneau activé sur toutes les pages (le même que dans le tutoriel, à tabindex près) :
Code:
jQuery(document).ready(function () {
    jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" ></iframe></div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" tabindex="1" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>');
});


Dernière édition par MlleAlys le Dim 8 Mar 2015 - 22:19, édité 1 fois

MlleAlys
+ Hyperactif +

Messages : 4405
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ouverture panneau latéral avec la touche "entrée"

Message par Self le Dim 8 Mar 2015 - 19:35

Re MlleAlys Smile !

Si on ajoute ce code :
Code:
$(function(){
   $('img[tabindex]').on('focus', function(){
      $(this).on('keypress', function(e){
         if(e.which == 13){ $(this).trigger('click') }
      });
   });
});

On prend chaque image ayant l'attribut tabindex, si l'une d'entre elle est focused et qu'on presse la touche enter on déclenche l'attribut onclick de celle-ci Wink !

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ouverture panneau latéral avec la touche "entrée"

Message par MlleAlys le Dim 8 Mar 2015 - 19:37

Re SeLfde4Th7 ! o/

Si je retire juste le img comme ça :
Code:
$(function(){
  $('[tabindex]').on('focus', function(){
      $(this).on('keypress', function(e){
        if(e.which == 13){ $(this).trigger('click') }
      });
  });
});

est ce que ça fonctionnera pour n'importe quel élément et pas seulement les images ? =3




Edit : ça fonctionne super au début, mais si je "fais le tour" de la page avec la touche tabulation jusqu'à revenir sur l'image de la cb, là ça ne fonctionne plus... ^^"

MlleAlys
+ Hyperactif +

Messages : 4405
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ouverture panneau latéral avec la touche "entrée"

Message par Self le Dim 8 Mar 2015 - 20:33

Le mieux serait peut-être de mettre une class à chaque élément puis de sélectionner via la class les éléments :
Code:
$(function(){
   $('.tIndex').on('focus', function(){
      $(this).on('keypress', function(e){
         if(e.which == 13){ $(this).trigger('click') }
      });
   });
});

Ainsi peut importe l'élément que c'est Wink !

Le code de la CB serait alors :
Code:
        jQuery(document).ready(function () {
            jQuery('body').append('<table class="tIndex" style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" ></iframe></div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" tabindex="1" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>');
        });

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ouverture panneau latéral avec la touche "entrée"

Message par MlleAlys le Dim 8 Mar 2015 - 21:34

il me semple que la class doit se mettre sur l'image et pas sur la table ^^"
Code:
        jQuery(document).ready(function () {
            jQuery('body').append('<table style="position: fixed; bottom: 50px; left: 0px;background-color: #ffffff;z-index:10000;"><tr><td><div id="panneau" scrolling="no" style="width: 800px; height: 400px; display: none;" marginwidth="0" marginheight="0" frameborder="0"><iframe src="/chatbox/index.forum?page=front" style="width: 800px; height: 400px;" ></iframe></div></td><td style="vertical-align: bottom;"><img src="http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png" class="tIndex" tabindex="1" onClick="document.getElementById(\'panneau\').style.display=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'block\':\'none\';this.src=(this.src==\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\')?\'http://i81.servimg.com/u/f81/11/21/85/73/fermer10.png\':\'http://i81.servimg.com/u/f81/11/21/85/73/ouvrir10.png\';"/></td></tr></table>');
        });

Mais j'ai toujours le même problème : au premier passage ça fonctionne, mais si je passe par tous les liens de la page pour revenir au début, ça ne fonctionne plus =/

MlleAlys
+ Hyperactif +

Messages : 4405
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ouverture panneau latéral avec la touche "entrée"

Message par Self le Dim 8 Mar 2015 - 22:00

Je reproduis sur ton forum où le code fonctionne une fois sur deux.
Mais sur le miens cela fonctionne très bien, tu as placé les codes comment ?

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ouverture panneau latéral avec la touche "entrée"

Message par MlleAlys le Dim 8 Mar 2015 - 22:07

dans modules > javascript, j'ai :
- celui de la chatbox du message au dessus, sur toutes les pages,
- celui pour le focus sur toutes les pages aussi,
- et celui pour les onglets des catégories pour lequel j'ai tout décoché (mais sans supprimer pour ne pas le perdre ^^")
- et j'ai forcé les templates par défaut aussi du coup

mais le problème reste, sur chrome comme sur firefox

MlleAlys
+ Hyperactif +

Messages : 4405
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ouverture panneau latéral avec la touche "entrée"

Message par Self le Dim 8 Mar 2015 - 22:11

Essai voir si ça s'arrange avec ce code (mais j'y crois peu) :
Code:
$(function(){
   $('.tIndex').on('keyup', function(e){
      if(e.which == 13) $(this).trigger('click');
   });
});

Self
+ Hyperactif +

Masculin
Messages : 3710
Inscrit(e) le : 13/06/2013

Self a été remercié(e) par l'auteur de ce sujet.

Résolu Re: ouverture panneau latéral avec la touche "entrée"

Message par MlleAlys le Dim 8 Mar 2015 - 22:19

ça fonctionne !!!! 8D

merci beaucoup !!! o/ Comme quoi, faut croire plus ! xD

je passe le sujet en résolu, Thanks

MlleAlys
+ Hyperactif +

Messages : 4405
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum