¿Hay una forma HTML limpia de relacionar una pulsación de tecla con un elemento desplegable

Question

Estoy trabajando en una aplicación en la que deseo permitir la entrada rápida de datos. Así que quiero hacer un campo de fecha seleccionado por valor de mes int (es decir, 7 = julio). Creo que solo tengo 2 opciones.

1. Anteponer el número de mes (1 - Jan, 2 - Feb, etc ...) pero esto es feo
2. Uso JS o jQuery para interceptar las pulsaciones de tecla y seleccione el mes correspondiente (factible , pero desordenado)

¿Hay alguna manera de tener un localizador oculto para un menú desplegable?

- Editar para mayor claridad -

Estoy tratando de permitir a los usuarios a introducir la fecha a través del teclado con más facilidad lo que en lugar de utilizar un selector de calendario (que no tengo) que podían escribir .... 1 pestaña 1 pestaña 2010, que daría como resultado la fecha 1 de enero de 2010

Answer 1

Existe un atributo accesskey en HTML, que permite especificar el acceso mediante [Alt] + Character. Pero no sé, si esto funciona para <option>:

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

Answer 2

Aquí hay un ejemplo de cómo conseguir que funcione:

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

Está codificado para trabajar con 1-12 por razones de simplicidad. (Los menús desplegables de fecha y año deberían funcionar automáticamente en virtud de la funcionalidad integrada del navegador.)

Esto tampoco debería afectar la capacidad del usuario para (por ejemplo) escribir "Dec" para diciembre.

Answer 3

Puede hacerlo fácilmente con javascript. Simplemente marque la casilla desplegable seleccionada (en el foco) y presione la tecla, si se presiona 1, luego seleccione el primer elemento, 2 segundos y así sucesivamente. También puede ser necesario agregar un poco de retraso y esperar una segunda pulsación de tecla en caso de números de varios dígitos.

alternativa, se puede probar algo no estándar:

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

pulsando Alt + Número que será capaz de seleccionar elementos en el menú desplegable. Simplemente agregue el atributo accesskey a las opciones dinámicamente (JavaScript) a su cuadro desplegable enfocado.