在div中使用箭头键

时间:2011-05-18 15:22:00

标签: javascript jquery input textbox

我有两个div。其中一个包含输入字段,另一个包含建议列表。我想要的是用户使用箭头键进入第二个div的能力,同时滚动浏览建议列表。这是它的外观:

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

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

我确实在Stack找到了一些东西:Fiddle

但是我无法使它工作,因为它使用类名而我使用的是ID。 我非常感谢有人会为我重写这个,所以我可以追加ID。

2 个答案:

答案 0 :(得分:1)

使用onKeyDown事件,如

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;

然后您的输入HTML将如下所示:

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

请注意,我的示例使用经常不必要的jQuery库。

在实际的事件中,您将更改列表项的样式并保存用户为自动完成选择的值,您现在应该可以自己弄清楚。

答案 1 :(得分:1)

这是一个非常简单的改变,让你的小提琴按你想要的方式工作:

jsfiddle

类名仅用于突出显示所选项目。小提琴使用id来引用输入和项目包装器。它与你的代码没有太大的不同。现在您可以看到它与您的代码一起使用,您应该能够进行您认为合适的其他更改。希望它有所帮助。

编辑: Woops。看起来我忘了更新小提琴。这已得到修复。