Question

目前我设置了一个功能，可以在页面中按左右箭头键前进和后退：

$(document).keydown(function (e) {
    if ($(e.target).is('input')) { return false
    } else if (e.keyCode == 37) {
        $(".pageback").click();
        return false;
    }
    if (e.keyCode == 39) {
        $(".pagenext").click();
        return false;
    }
});

这允许使用箭头键来回浏览，但是当遇到文本框时，箭头键仍处于活动状态。

虽然这会在文本框处于焦点时停止keydown函数，但它也不允许在输入区域中输入任何内容。

HELP！

由于

Answer 1

“它也不允许输入任何内容。”

问题在于这一部分：

if ($(e.target).is('input')) { return false

当您从事件处理程序返回false时，它会阻止事件的默认行为。

将其更改为return true或仅return（没有值），并且将允许默认行为（在这种情况下，在字段中输入）。

（注意：您可能还想检查textarea元素，而不仅仅是输入。）

Answer 2

我的方法是检查目标是否为 document.body 上的 keydown，然后等待 keyup。

document.addEventListener('keydown', function(keyEvent) {
  if (keyEvent.key != 'ArrowLeft' || keyEvent.shiftKey || keyEvent.ctrlKey || keyEvent.altKey || keyEvent.metaKey) {
    return
  }
  if (keyEvent.target != document.body) {
    return
  }
  
  keyEvent.preventDefault()
  
  // myButton.classList.add('active') // visual feedback a button has been triggered

  document.addEventListener('keyup', function(keyEvent) {
    keyEvent.preventDefault()
    
    // do your stuff
  })
})

仅当输入未处于焦点时才进行keydown

2 个答案: