使用方格中的箭頭鍵

我有兩個div。其中一個包含一個輸入字段和另一個建議列表。我想要的是用戶使用箭頭鍵在第二個div中下滾的能力，並滾動瀏覽建議列表。這是它的外觀：使用方格中的箭頭鍵

<div id="first"><input type="text" /></div> 

<div id="second"> 
<ul> 
<li>suggestion</li> 
<li>suggestion2</li> 
<li>suggestion3</li> 
</ul> 
</div>

我actualy發現在堆棧的東西在這裏：Fiddle

但我不能使它發揮作用，因爲它使用類名和我使用的ID來代替。我非常感謝，如果有人會爲我重寫這個，所以我可以附加ID。

來源

2011-05-18 Youss

你不問一個問題 - 你要求某人爲你做你的工作... – Rob 2011-05-18 15:27:56

這是一個非常簡單的變化來獲取撥弄工作，你怎麼想吧：

jsfiddle

的名字在那裏只將類高亮顯示所選項目。小提琴使用id來引用輸入和項目包裝。它和你的代碼真的沒什麼不同。現在你可以看到它與你的代碼一起工作了，你應該能夠做出你認爲合適的更改。希望能幫助到你。

編輯： Woops。看起來我忘了更新小提琴。這已被修復。

來源

2011-05-18 16:21:13

謝謝。我的腳本中的列表是真實的鏈接（href）。通過使用箭頭鍵，我認爲我可以按enter鍵然後轉到url。但是現在我意識到這是一個完全不同的問題。但是，這是因爲通過分析你和Cobra_Fast提供的anwser，我能夠改變我腳本中的許多（其他）事物，首先我不知道如何改變。非常感謝。 – Youss 2011-05-20 15:25:49

沒問題。很高興它有一些幫助。我以爲你可能想要回車並填入文本框，但是如果你想進入鏈接，你可以處理回車鍵並根據$（curr）.attr改變'window.location' （「href」）'很容易。 – 2011-05-20 17:25:55

使用像

function KeyDownEvent(Event) 
{ 
    if (Event.keyCode == 40) // down key was pressed 
    else if (Event.keyCode == 38) // up key was pressed 
} 

document.getElementById("textinput").onkeydown = KeyDownEvent;

的onKeyDown事件然後你輸入HTML看起來像：

<input type="text" id="textinput" />

請注意，我的例子不不利用常常是不必要的jQuery庫。

在實際的事件中，您將更改列表項的樣式並保存用戶選擇的自動完成的值，您現在應該可以自己弄清楚。

來源

2011-05-18 15:32:25

謝謝你的anwser。我的腳本非常複雜（對我來說），所以我不能使用你的anwser，但是你確實指向了我的正確方向。 – Youss 2011-05-20 15:19:32

使用方格中的箭頭鍵

回答

相關問題