Des livres incontournables pour tout maîtriser

  • CSS2
  • Réussir son site web avec XHTML et CSS
  • PHP 5 avancé
  • Memento CSS
  • Memento XHTML
  • Ergonomie web
  • Bien rédiger pour le web
Auteur
Patidou
# 02 Apr 2009 - 17:42:16
Citer
1117 Posts
Bonjour,

Suite à une discussion sur un autre forum j'ai commis cette page. Vu qu'apparemment IE est le seul navigateur qui déclenche le onchange avec le clavier, j'ai utilisé cette méthode. Qu'en pensez-vous? Comment cela fonctionne-t-il dans IE8?

Merci d'avance. cligne
Modifié par Patidou (02 Apr 2009 - 17:42)

http://www.lombre.net/ 
^
QuentinC
# 02 Apr 2009 - 19:24:10
Citer
Stagiaire qui bosse ... ou pas
4683 Posts
Je ne suis pas sûr que la définition de onchange soit assez précise pour être sûr qu'IE est le seul à avoir ce comportement. Faudrait vérifier la doc...

Quoi qu'il en soit, pour les autres navigateurs, l'action se déclenche dès que la liste perd le focus, ça peut quand même être potentiellement surprenant.

Il existe 3 sortes de personnes : ceux qui savent compter, et ceux qui ne savent pas.

http://quentinc.net/ msn 
^
Patidou
# 03 Apr 2009 - 10:09:20
Citer
1117 Posts
Merci QuentinC. cligne

Si quelqu'un a des infos sur la navigation dans cette page avec IE8... smile

http://www.lombre.net/ 
^
Clair de Lune
# 03 Apr 2009 - 12:25:55
Citer
49 Posts
Bonjour

Je viens préciser que la demande de Patidou provient du coup de main qu'il me donne pour un problème rencontré sur mon blog de tests smile

En effet, je développe un petit plugin pour Dotclear 2 qui affiche la liste des blogs d'une installation multiblogs dans un petit menu déroulant (balise select). Le choix d'un élément de la liste redirige vers le blog choisi (menu de droite > tous les blogs)

En l'absence de javascript, un bouton input permet d'envoyer la requête vers un script en php. Si javascript est activé, c'est l'évènement onChange qui est intercepté pour réaliser la redirection.

Tout cela marche bien avec Firefox.

Le souci vient avec Internet Explorer (6,7 et 8 !) et la navigation au clavier : si javascript est activé, il est impossible de naviguer avec les flèches dans ce menu déroulant sans déclencher la redirection.

J'aimerais bien que ce menu soit accessible...

http://www.campingclairdelune.fr 
^
QuentinC
# 03 Apr 2009 - 13:03:41
Citer
Stagiaire qui bosse ... ou pas
4683 Posts
Le seul moyen c'est de ne pas utiliser onchange, je le crains. Ou alors ... j'ai une petite idée de dernière minute, je ne sais pas si ça pourrait fonctionner mais ça reste quand même du gros bricolage :
Intercepter les évènements keyup. Dans onchange, si une touche spécifique vient d'être appuyée, annuler la redirection

Grosso modo un truc dans ce genre :


var list = .... ;
list.lastKey = 0;
list.lastKeyTs = 0;
list.onkeyup = function (evx) {
var e = (evx? evx : window.event);
var k = (e.keyCode? e.keyCode : e.which);
this.lastKey = k;
this.lastKeyTs = (new Date()).getTime(); // timestamp
};
list.onchange = function () {
if (this.lastKey >= 33 && this.lastKey <= 40) {
var t = (new Date()).getTime();
if (t-this.lastKeyTs <250) return;
}
this.form.submit();
};


Les touches fléchés ne sont pas les seules touches à prendre en compte : en effet, on peut aussi se déplacer dans la liste avec page up / page down, et avec home et end.
Je ne suis plus sûr de leurs codes de touche respectifs, mais je sais qu'ils sont tous entre 33 et 48 et qu'ils se suivent. Essayer avec un script bidon au cas où.

Il existe 3 sortes de personnes : ceux qui savent compter, et ceux qui ne savent pas.

http://quentinc.net/ msn 
^
Clair de Lune
# 11 Apr 2009 - 11:04:54
Citer
49 Posts
J'ai finalement opté pour la suppression de ce javascript et l'affichage d'un bouton OK pour soumettre le formulaire.

Au final, sacrifier l'accessibilité pour une fonctionnalité aussi peu importante m'a semblé être le mauvais choix, merci QuentinC pour ta réponse qui m'a ouvert les yeux smile

http://www.campingclairdelune.fr 
^
Florent V.
# 11 Apr 2009 - 11:56:22
Citer
Administrateur
17144 Posts
Bonjour,

Il s'agit au final de faire des liens vers des pages ou des sites? Pas de saisie d'information par l'utilisateur?

Auquel cas, tout cela n'a strictement rien à faire dans un formulaire. C'est une erreur de conception en amont.

http://fvsch.com 
^
Clair de Lune
# 11 Apr 2009 - 13:47:15
Citer
49 Posts
euh... il n'y a pas effectivement de saisie de texte par le visiteur, mais un choix opéré dans une liste déroulante (la liste affiche dynamiquement des liens vers les autres blogs d'une installation multiblog), le résultat de ce choix étant la redirection vers un de ces blogs.

Du coup, je ne comprends pas trop pourquoi ça n'aurait rien à voir avec un formulaire, la balise <select> étant un élément de contrôle de la balise <form> , non ?

Users generally "complete" a form by modifying its controls (entering text, selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail server, etc.)

http://www.campingclairdelune.fr 
^
Laurent Denis
# 23 Apr 2009 - 16:45:27
Citer
7948 Posts
Bonjour,

Pas optimal, un peu ancien, mais utile comme point de départ: http://www.heltenkelt.se/accessible-selectbox/

Ne parlons pas de choses nouvelles. Commencez par ne pas détourner CSS de son objet, ce que vous faites immanquablement avec des techniques sexy qu'on enseigne ici.

http://www.temesis.com 
^
Powered by Phedio v3.8.6 beta in 31.3 ms © dew