我試着總結一下你需要做的事情。如果您逐步完成每個部分,實施起來應該不是什麼大問題。
使下拉列表不可見。
創建一個隱藏<select>
場通過POST傳遞(也因爲非JS用戶)
您可以創建國家
數組 var countries = [
{ name: "Russian", flag: "flag_ru.gif" },
{ name: "USA", flag: "flag_en.gif" },
{ name: "Germany", flag: "flag_de.gif" },
{ name: "China", flag: "flag_ch.gif" }
];
事件偵聽器文本<input>
字段
// function keydown(e)
e = e || window.event;
switch (e.keyCode)
// 38: up
// 40: down
對每一個/減鍵:
3.1。跟蹤活動元素(通過箭頭鍵選擇),添加一個特殊的類如active
。
3.2。更改<input>
字段旁邊的標記。
3.3。更改隱藏的<select>
字段。
附加:進行選擇圓形。如果最後一個激活時按下了向下鍵,則跳轉到第一個。向上鍵和第一個元素的情況相同。
Extra2:Clean清除標記,並與演示文稿(CSS)分開。
Extra3:你應該讓整個表單訪問沒有鼠標,所以箭頭鍵將不僅顯示了下拉菜單中,但實際上你可以與他們進行導航。要關閉下拉菜單,可以使用esc
按鈕。這裏是概念證明:
function handleArrowKeys(e) {
// capture the event
e = e || window.event;
// collect link elements
var dropdown = byId("dropdown");
var elements = byTag("tr", dropdown);
var len = elements.length - 1;
var i = selectedIndex;
// handle event
switch (e.keyCode) {
case 38: // up
if (i <= 0) { // overflow
selectedIndex = len;
removeClass(elements[i], "active");
addClass(elements[len], "active");
} else {
removeClass(elements[i], "active");
addClass(elements[i-1], "active");
selectedIndex -= 1;
}
// update <select>
break;
case 40: // down
if (i >= len) { // overflow
selectedIndex = 0;
removeClass(elements[i], "active");
addClass(elements[0], "active");
} else {
removeClass(elements[i], "active");
addClass(elements[i+1], "active");
selectedIndex += 1;
}
// update <select>
break;
case 27: // esc
hide("dropdown");
break;
default: return true;
}
return false;
}
你對此並不認真,是嗎?這需要數週時間才能完成。 – aefxx 2010-11-13 23:14:58
你有沒有成功解決這個問題?你還需要幫助嗎? – jcolebrand 2010-12-14 03:40:49