如何防止某些事件的按键默认设置，然后再次恢复默认设置

Question

我一直在做一些需要我使用 space 条来触发事件的事情。我一直在做的事情要复杂得多，但我已将其简化为基础知识，作为我需要做的事情的示例。

想法是，当按住 space 条时，它会突出显示此 div，而当它放开时，它会取消突出显示。我有一个问题，当我按下 space 时，默认是让滚动条分阶段向下跳动。为了解决这个问题，我尝试添加 prevent default 然后结束使用 return false.

这太棒了...直到我意识到当我测试输入字段文本框时，我已经失去了在输入时输入 space 的能力。

我认为我需要的是：

在我完成后以某种方式（撤消）防止默认或 return false 用完了，虽然我不知道该怎么做因为我需要这个功能在整个页面上可用。
阻止space栏在按住时使页面向下滚动但是仍然保留在输入文本时添加 space 的能力。

真的不知道该怎么做。

这是我在这个例子中使用的代码：

HTML

<div class="container">
    <div class="moo">I am moo</div>
    <input/>
</div>

CSS:

.container {
     height:9000px;   
}
.moo {
    border:1px solid black
}
.red {
    background:red;
}
input {
    margin-top:30px;
}

脚本：

$(document).keydown(function(e) {
    if(e.keyCode === 32) {
        $('.moo').addClass('red');
        //event.preventDefault();
        //event.stopPropagation();
        return false;
    }
    else {
        $('.moo').removeClass('moo');
    }
});
$(document).keyup(function(e) {
    if(e.keyCode === 32) {
        $('.moo').removeClass('red');
        event.stopPropagation();
    }
});

DEMO HERE

Answer 1

检查 e.target，它会告诉您 DOM 元素在 keydown/keyup 事件被激活时获得了焦点。如果目标是 textarea 或 input

类型，请不要禁用事件的默认处理

Answer 2

我会这样做：

$("input").keydown(function(e) {
    if(e.keyCode === 32) {
        $(this).val($(this).val()+ " ");
    }
});

Here is the JSFiddle demo

Answer 3

DEMO

改为捕获 keypress 事件和 toggleClass red 并且您可以使用 e.target.nodeName 检查目标项目是 body 还是 input element

$(document).keypress(function(e) {
    if(e.keyCode === 32 && e.target.nodeName=='BODY') {
        $('.moo').toggleClass('red');
        event.preventDefault(); //prevent default if it is body
    }
});

或者，如果您想保持 keyup 和 keydown 闪烁，只需保持以下两个事件即可：

$(document).keydown(function(e) {
    if(e.keyCode === 32 && e.target.nodeName=='BODY') {
        $('.moo').toggleClass('red');
        event.preventDefault();
    }
});
$(document).keyup(function(e) {
    if(e.keyCode === 32 && e.target.nodeName=='BODY') {
        $('.moo').toggleClass('red');
        event.preventDefault();
    }
});

DEMO

如何防止某些事件的按键默认设置，然后再次恢复默认设置

how to prevent default on keypress for certain event but then bring back the default again

javascript

jquery

html

keydown

preventdefault