Javascript:防止空格键在指定的 div 中滚动

Question

我在一个 div 中有一个文本区域。文本区域比 div 高但不能垂直滚动。相反，div 垂直滚动。但是，当我通过 javascript 和 blur() 全部禁用 textarea 时，空格击键仍然会影响 div，因为向下滚动页面。我尝试了很多方法来摆脱这个但没有运气。这是我的代码:

#container {
  overflow-y: scroll;
  overflow-x: hidden;
  float: left;
  white-space: nowrap;
  height: 200px;
}
textarea {
  resize: none;
  overflow-y: hidden;
  overflow-x: scroll;
  word-wrap: off;
  height: 1000px;
}

<div id="container">
  <textarea>{...}</textarea>
</div>

当行数增加时，textarea 的高度实际上是由 javascript 自动调整的。所以它不是一个静态数字。有什么办法可以防止父 div 响应空格键事件吗？谢谢!

Answer 1

这应该可以解决问题。这里的检查可能比必要的要多，但我宁愿谨慎行事。

document.onkeypress = function(e) {
    e = e || window.event;
    var charCode = e.keyCode || e.which;
    if (charCode === 32) {
        e.preventDefault();
        return false;
    }
}

如果你喜欢的话，你也可以用 jQuery 做到这一点:

$(window).keypress(function(e) {
    if (e.which == 32)
        return false;
});

在这两个示例中，您都可以将 document/window 更改为您的元素或您想要禁用空格键的任何元素。