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

Question

我在div里面有一个textarea.textarea比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;
});

在这两个示例中,您可以将文档/窗口更改为您的元素或要禁用空格键的任何元素.