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){});

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

从特定输入文本框中导航jquery键盘

4 个答案: