Question

我正在使用代码：

window.onkeydown = function(e) { 
    return !(e.keyCode == 32);
};

完全符合我的要求，当按下空格键时停止滚动页面。但是，它也会阻止用户在文本框中键入空格

有没有办法阻止空格键滚动以及在键入时保留空格键功能？

Answer 1

尝试检查target是否为正文：

＆＃13;

window.addEventListener('keydown', function(e) {
  if(e.keyCode == 32 && e.target == document.body) {
    e.preventDefault();
  }
});

＆＃13;

body { height: 100000px; }

＆＃13;

<input />
<textarea></textarea>

＆＃13;

Demo

Answer 2

您可以查看e.target，如果它是您返回false的正文。

window.onkeydown = function(e) { 
  return !(e.keyCode == 32 && e.target == document.body);
};

Answer 3

window.onkeydown = function(e) { 
    e = e || window.event;  //normalize the evebnt for IE
    var target = e.srcElement || e.target;  //Get the element that event was triggered on
    var tagName = target.tagName;  //get the tag name of the element [could also just compare elements]
    return !(tagName==="BODY" && e.keyCode == 32);  //see if it was body and space
};

Answer 4

您可以检查事件的目标，只有在它不是“可输入”元素时才运行您的代码。例如：

window.onkeydown = function(e) {
    var elem = e.target.nodename;
    if( elem !== 'TEXTAREA' && elem != 'INPUT' ) {
        return !(e.keyCode == 32);
    }
};

Answer 5

CSS：

body::-webkit-scrollbar {display: none;} /* Chrome, Safari and Opera */
body {-ms-overflow-style: none;}  /* IE and Edge */
html {scrollbar-width: none;}  /* Firefox */

JavaScript：

window.addEventListener('keydown', function() {if (event.keyCode == 32) {document.body.style.overflow = "hidden";}});
window.addEventListener('keyup', function() {if (event.keyCode == 32) {document.body.style.overflow = "auto";}});

JavaScript 在按下空格键时使溢出隐藏 onkeydown 事件，因此无法滚动，当您离开空格键时，它会使溢出自动进行，因此可以再次滚动。这会更改页面的宽度，因此可以添加 CSS 以消除滚动条。

HTML阻止空格键滚动页面

5 个答案: