Existe-t-il une méthode HTML propre pour associer une pression sur une touche à un élément de la liste déroulante ?

Question

Je travaille sur une application dans laquelle je veux permettre une saisie rapide des données. Je veux donc créer un champ de date sélectionné par la valeur int du mois (c'est-à-dire 7 = juillet). Je pense que je n'ai que 2 options.

1. Faire précéder le mois d'un numéro (1 -- Jan, 2 -- Feb, ... etc) mais c'est moche.
2. Utiliser JS ou jQuery pour intercepter les pressions sur les touches et sélectionner le mois approprié (faisable, mais compliqué).

Existe-t-il un moyen d'avoir un localisateur caché pour une liste déroulante ?

-- Editer pour plus de clarté --

J'essaie de permettre aux utilisateurs de saisir la date au clavier plus facilement. Ainsi, au lieu d'utiliser un sélecteur de calendrier (que j'ai), ils pourraient taper ..... 1 tab 1 tab 2010, ce qui donnerait la date du 1er janvier 2010.

Answer 1

Voici un exemple de la façon de le faire fonctionner :

$(function()
{
    $.each($("select.month"), function() { new MonthSelector(this); });
});

var MonthSelector = function(that)
{
    var self = this;
    $(that).bind("keypress", function(event) { self.onKeyPress(event); } );
    this.two = false;
    this.select = that;
};

MonthSelector.prototype.onKeyPress = function(event)
{
    if (event.which < 48 || event.which > 57) return;
    var digit = event.which - 48;

    if (this.two && digit <= 2)
    {
        digit += 10;
        this.two = false;
    }
    else
    {
        this.two = (digit == 1);
    }

    if (digit != 0) 
        this.select.selectedIndex = digit - 1; 
};

Il est codé en dur pour fonctionner avec 1-12 pour des raisons de simplicité. (Les menus déroulants de la date et de l'année devraient fonctionner automatiquement en vertu de la fonctionnalité intégrée du navigateur).

Cela ne devrait pas non plus affecter la possibilité pour l'utilisateur de taper (par exemple) "Dec" pour décembre.

Answer 2

Il existe un accesskey dans le langage HTML, qui permet de spécifier l'autorisation d'accès à l'aide de l'attribut [Alt] + Character . Mais je ne sais pas si cela fonctionne pour <option> :

<select>
    <option accesskey="1">January</option>
    <!-- ... -->
</select>

Answer 3

Vous pouvez le faire facilement avec javascript. Il suffit de vérifier la sélection d'une liste déroulante (onfocus) et l'appui sur une touche. Si la touche 1 est enfoncée, le premier élément est sélectionné, la touche 2, le deuxième et ainsi de suite. Il faudra peut-être aussi ajouter un délai et attendre une deuxième pression sur la touche dans le cas de numéros à plusieurs chiffres.

Vous pouvez aussi essayer quelque chose qui n'est pas standard :

<label for="state">State:</label>
<select id="state" name="state">
    <option accesskey="1">.1.</option>
    <option accesskey="2">.2.</option>
    <option accesskey="3">.3.</option>
    <option accesskey="4">.4.</option>
</select>

En appuyant sur Alt+Numéro, vous pourrez sélectionner des éléments dans la liste déroulante. Il suffit d'ajouter accesskey aux options de façon dynamique (JavaScript) à votre liste déroulante ciblée.