Question

我一直在做一些需要我使用空格键来触发事件的事情。我一直在努力的事情要复杂得多，但我把它简化为基础知识，作为我需要做的事情的一个例子。

这个想法是，当空格键被按下时，它会突出显示这个div，当它被放开时它会突出显示。我有一个问题，当我按下空格时，默认是让滚动条分阶段跳下来。为了解决这个问题，我尝试添加防止默认值，然后最终使用return false。

这很棒......直到我意识到当我在输入字段文本框中输入测试时，我已经取消了在打字时放置空间的能力。

我认为我需要的是：

要（撤消）阻止默认值或在我之后以某种方式返回false 完成使用它虽然我无法弄清楚如何做到这一点因为我需要在整个页面上使用此功能。
停止空格键使页面向下滚动，但是仍然保持它在键入文本时添加空格的能力。

真的不知道怎么做。

以下是我为此示例使用的代码：

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

SCRIPT：

$(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

<强> DEMO

取代keypress事件和toggleClass red，您可以使用body检查目标项是input element还是e.target.nodeName

$(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

Answer 2

我就是这样做的：

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

Here is the JSFiddle demo

Answer 3

检查e.target，它会告诉您激活keydown / keyup事件时DOM元素的重点。如果目标的类型为textarea或input

，请勿禁用该事件的默认处理

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

3 个答案: