Esiste un modo HTML pulito per collegare una pressione di un tasto a un articolo a discesa

Question

Sto lavorando a un'applicazione in cui desidero consentire l'immissione rapida di dati. Quindi voglio fare un campo data selezionato per il valore int mese (cioè 7 = luglio). Penso di avere solo 2 opzioni.

1. Anteponi il numero al mese (1 - Jan, 2 - Feb, ... ecc), ma questo è brutto
2. Usa JS o jQuery per intercettare le pressioni dei tasti e selezionare il mese appropriato (fattibile , ma disordinato)

C'è un modo per avere un localizzatore nascosto per una discesa?

- Modifica per chiarezza -

Sto cercando di consentire agli utenti di inserire la data tramite la tastiera più facilmente così invece di utilizzare un selettore di calendario (che ho) che potevano tipo .... 1 scheda 1 tab 2010, che risulterebbe nella data 1 gennaio 2010

Answer 1

C'è un attributo accesskey in HTML, che consente di specificare per consentire l'accesso utilizzando [Alt] + Character. Ma io non lo so, se questo funziona per <option>:

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

Answer 2

Ecco un esempio di come farlo funzionare:

$(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; 
}; 

E 'difficile codificato per lavorare con 1-12 per semplicità. (La data e l'anno a discesa dovrebbero funzionare automaticamente in base alle funzionalità integrate del browser.)

Questo non dovrebbe influire sulla capacità dell'utente di (ad esempio) digitare "Dec" per dicembre.

Answer 3

Si può fare facilmente con javascript. Basta selezionare una casella a discesa selezionata (onfocus) e premere un tasto, se si preme 1, quindi selezionare il primo elemento, 2 secondi e così via. Potrebbe anche essere necessario aggiungere un po 'di ritardo e attendere una seconda pressione del tasto in caso di numeri a più cifre.

In alternativa si può provare qualcosa di non 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> 

premendo ALT + numero che sarà in grado di selezionare gli elementi nel menu a discesa. Basta aggiungere l'attributo accesskey alle opzioni dinamicamente (JavaScript) alla casella a discesa focalizzata.