jquery - 仅当输入未聚焦时 keydown

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 功能，但它也不允许在输入区域中输入任何内容。

帮助！

谢谢

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