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

[MlleAlys]

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>');
});

[Self]

Re MlleAlys !

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 !

[MlleAlys]

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

[Self]

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 !

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>');
        });

[MlleAlys]

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 =/

[Self]

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 ?

[MlleAlys]

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

[Self]

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');
   });
});

[MlleAlys]

ça fonctionne !!!! 8D

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

je passe le sujet en résolu, :thanks: