如何检测一个关键事件

时间:2011-09-14 14:53:51

标签: jquery

我有这种格式的列表:

<tr class='hoverTr trBuscaFornecedor'>
    <td width='100px'>Information 0</td>
    <td>Information 1</td>
    <td><input type='radio' class='hidden_apoioSelect'/></td>
</tr>

和js:

$(".hidden_apoioSelect").live("focusin", function(){
    $(this).keydown(function(e) {
        if((e.keyCode == 13 || e.keyCode == 40)){ 
            $(this).closest("tr").next().find('input').focus(); 
            $(this).closest("tr").removeClass("activeTr");
            $(this).closest("tr").next().addClass("activeTr");

        }else if(e.keyCode == 38){ 
            $(this).closest("tr").prev().find('input').focus(); 
            $(this).closest("tr").removeClass("activeTr");
            $(this).closest("tr").prev().addClass("activeTr");
        }
    });
});

因此,这将使用户有机会使用他们的键盘来选择数据库结果列表中的项目。

正如您所看到的,我被迫放置radio以使focus跟随这些行,所以我的问题是:

如何在不使用radio的情况下执行此操作,仅使用<tr>

P.S。我会接受任何改进我的代码的提示。

谢谢!

1 个答案:

答案 0 :(得分:1)

这就是你要追求的吗?

 $("tr").live("keydown", function(e){

    if ((e.keyCode == 13 || e.keyCode == 40)) {
        $(this).closest("tr").next().find('input').focus();
        $(this).closest("tr").removeClass("activeTr");
        $(this).closest("tr").next().addClass("activeTr");

    } else if (e.keyCode == 38) {
        $(this).closest("tr").prev().find('input').focus();
        $(this).closest("tr").removeClass("activeTr");
        $(this).closest("tr").prev().addClass("activeTr");
    }
});

jsFiddle Demo

或者甚至更少,你可以做到这一点,我认为这是你想要的一样!

 $("tr").live("keydown", function(e){
    if ((e.keyCode == 13 || e.keyCode == 40 || e.keyCode == 38)) {
        $(this).closest("table").find('tr').not(this).removeClass("activeTr");
        $(this).addClass("activeTr");
    } 
});

jsFiddle Demo #2