如何在某些区域用JS捕获键盘箭头，而不是其他区域

How to capture keyboard arrows with JS in some areas but not others

本文关键字：区域 其他 键盘 JS      更新时间：2023-09-26

我在这里看到了一个很棒的问题/答案:在JS/jQuery中绑定箭头键

但是现在我有这个问题:虽然我可以使用箭头键浏览我的网站上的各种选择，但我不能再像以前那样在文本框中编辑东西，因为我的箭头不再像我期望的那样工作了。

。通过AJAX加载的第一页，我可以通过箭头键导航我的"选择"(即图像)。然后我保存我的选择(图像)，并转到第二个页面，也是通过AJAX加载的。

但是，箭头绑定仍然有效，所以当我尝试使用右，左，Home, End, PgUp, PgDn箭头来导航文本框中的光标时，例如，纠正拼写错误，什么也不会发生，因为我已经阻止了默认行为，以避免在第1页上移动各种页面元素…

有办法解决这个问题吗?

我的代码:

不确定它在这里会有帮助。我不知道怎样才能帮到你，但我想说:

在第1页:

    <script type="text/javascript">
    /*************************************/
    /* selection navigation via keyboard */
    /*************************************/
    $(document).keydown(function(e) {
        switch(e.which)
        {
        case 37:  $("#selectPrevious").click();break;
        case 39:  $("#selectNext").click();break;
        case 33:  $("#jump10Back").click();break;
        case 34:  $("#jump10Forward").click();break;
        case 36:  $("#jumpFirst").click();break;
        case 35:  $("#jumpLast").click();break;
        default: return;
        }
        e.preventDefault();
    });
    </script>

，显然这个键赋值之后不会被擦除，因为我导航到第2页。我不希望绑定在第2页生效。澄清一下……有一个主页一直保持加载状态，页面1通过AJAX加载，然后它通过AJAX被页面2取代。

也许您可以将事件处理程序绑定到比document更具体的元素。如果AJAX加载是在两个不同的容器中完成的，即#page1和#page2，您可以将按键绑定到其中一个:

$("#page1").keydown(function(e) {
    // your code
})

另一个想法是在加载第二个页面时解除事件侦听器的绑定。因此，你可以使用jQuery的。off()或。unbind()方法:

if (loaded) {
    (document).unbind("keydown");
}

这将解除document的所有keydown事件的绑定。如果您想使解绑定更具体，您应该从匿名处理程序函数中创建一个命名函数;

function handleKeydown(e) {
    switch(e.which)
    {
    case 37:  $("#selectPrevious").click();break;
    case 39:  $("#selectNext").click();break;
    case 33:  $("#jump10Back").click();break;
    case 34:  $("#jump10Forward").click();break;
    case 36:  $("#jumpFirst").click();break;
    case 35:  $("#jumpLast").click();break;
    default: return;
    }
    e.preventDefault();
});
// Bind the handler
$(document).keydown(handleKeydown);
// Unbind the handler
if (page2) {
   $(document).unbind("keydown", handleKeydown);
}

from zerkms: "Just check the event source"

我检查了事件源，这为我工作。

相关文章：