Có cách HTML sạch để liên kết một lần nhấn phím đến một mục thả xuống

Question

Tôi đang làm việc trên một ứng dụng mà tôi muốn cho phép nhập dữ liệu nhanh. Vì vậy, tôi muốn tạo một trường ngày được chọn theo giá trị tháng int (tức là 7 = Tháng Bảy). Tôi nghĩ tôi chỉ có 2 lựa chọn.

1. Thêm vào trước số vào Tháng (1 - Jan, 2 - Feb, ... vv) nhưng đây là Ugly
2. Sử dụng JS hay jQuery để đánh chặn máy ép chìa khóa và chọn tháng thích hợp (doable , nhưng lộn xộn)

Có cách nào để có vị trí ẩn cho trình đơn thả xuống không?

- Chỉnh sửa cho Clarity -

Tôi cố gắng để cho phép người dùng nhập vào các ngày thông qua bàn phím dễ dàng hơn nên thay vì sử dụng một bảng chọn lịch (mà tôi có) họ có thể gõ .... 1 tab 1 tab 2010, sẽ dẫn đến ngày 1 tháng 1 năm 2010

Answer 1

Có thuộc tính accesskey trong HTML, cho phép chỉ định cho phép truy cập bằng cách sử dụng [Alt] + Character. Nhưng tôi không biết, cho dù công trình này cho <option>:

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

Answer 2

Dưới đây là một ví dụ về làm thế nào để có được nó làm việc:

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

Nó cứng mã hoá để làm việc với 1-12 để đơn giản. (Bản cập nhật ngày và năm sẽ tự động hoạt động dựa trên chức năng được tích hợp của trình duyệt.)

Điều này cũng không ảnh hưởng đến khả năng của người dùng (ví dụ) nhập "Tháng 12".

Answer 3

Bạn có thể làm điều đó với javascript dễ dàng. Chỉ cần kiểm tra một hộp thả xuống đã chọn (onfocus) và nhấn phím, nếu 1 được nhấn, sau đó chọn phần tử đầu tiên, 2 - giây và cứ tiếp tục như vậy. Cũng có thể cần phải thêm một số độ trễ và chờ một lần nhấn phím thứ hai trong trường hợp có nhiều chữ số.

Hoặc bạn có thể thử một cái gì đó không tiêu chuẩn:

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

Bằng cách nhấn Alt + Số bạn sẽ có thể chọn các yếu tố trong trình đơn thả xuống. Chỉ cần thêm thuộc tính accesskey vào các tùy chọn động (JavaScript) vào hộp thả xuống tập trung của bạn.