使用方格中的箭头键

我有两个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

使用方格中的箭头键

回答

相关问题