javascript - 来自特定输入文本框的 jquery 键盘导航

Question

我正在开发一个内部 Web 应用程序，并想为其添加键盘导航。根据研究，某种形式的 javascript 似乎是处理此问题的最佳方法。

这是我想出的一个例子：

   $(document).keydown(function (e) {

                if (e.keyCode == 74) {
                    window.location = 'page1.html'; // Key = J
                }
                else if (e.keyCode == 75) {
                    window.location = 'page2.html'; // Key = k
                }
                else if (e.keyCode == 76) {
                    window.location = 'page3.html'; // Key = L
                }

            });

这很好用，但我想让它只能从 1 个特定的文本输入中执行。（基本上是一个导航框）我无法弄清楚那部分。有任何想法吗？

有没有人有这种导航形式的经验。它可靠吗？

我对javascript不是很有经验，所以任何想法或建议都值得赞赏。

Answer 1

假设你的导航输入框是这样的

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

然后对此输入元素使用相同的处理程序

$("#nav").keydown(function (e) {

                if (e.keyCode == 74) {
                    window.location = 'page1.html'; // Key = J
                }
                else if (e.keyCode == 75) {
                    window.location = 'page2.html'; // Key = k
                }
                else if (e.keyCode == 76) {
                    window.location = 'page3.html'; // Key = L
                }

            });

Answer 2

   $(document).keydown(function (e){

        if( e.target.id !== "elementId" ){
            return;
        }

        if (e.keyCode == 74) {
            window.location = 'page1.html'; // Key = J
        }
        else if (e.keyCode == 75) {
            window.location = 'page2.html'; // Key = k
        }
        else if (e.keyCode == 76) {
            window.location = 'page3.html'; // Key = L
        }
    }); 

Answer 3

您应该将事件绑定到您的特定字段以执行此操作。像这样的东西：

$('#yourinputfieldid').on('keydown',function (e) {
    if (e.keyCode == 74) {
        window.location = 'page1.html'; // Key = J
    } else if (e.keyCode == 75) {
        window.location = 'page2.html'; // Key = k
    } else if (e.keyCode == 76) {
        window.location = 'page3.html'; // Key = L
    }
});

Answer 4

据我所知，首先建议使用 e.which 而不是 e.keyCode 。

$('#id_of_input').on('keydown',function(e){...});

$(document).on('keydown','#id_of_input',function(e){});

当元素被动态添加到页面时，应该使用第二个。