如何在特定事件中防止按键默认操作，但随后再次恢复默认操作

Question

如何在特定事件中防止按键默认操作，但随后再次恢复默认操作

javascriptjqueryhtmlkeydownpreventdefault

13

我一直在做一个需要使用空格键触发事件的东西。我正在处理的事情更加复杂，但我已经将其简化为基础示例以说明我需要做的事情。

想法是当按住空格键时，它会突出显示这个

，松开时取消突出显示。我遇到的问题是，当我按下空格时，默认行为是使滚动条向下跳跃。为了解决这个问题，我尝试添加preventDefault，然后最终使用return false。

这很好......直到我意识到当我测试输入文本框中的文字时，我失去了输入空格的能力。

我认为我需要：

在完成使用后（撤消）preventDefault或return 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;
}

脚本：

$(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();
    }
});

点此查看演示

- Suzi Larsen

3个回答

3

这是我的做法：

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

这里是 JSFiddle 的演示

- Ahs N

0

检查e.target，它告诉你在触发keydown/keyup事件时哪个DOM元素被聚焦了。如果目标是textarea或input类型，请不要禁用事件的默认处理。

- Iftah

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Guruprasad J Rao · Accepted Answer

演示

改为捕获 keypress 事件，然后使用 toggleClass 切换 red 类，并且可以通过 e.target.nodeName 检查目标元素是 body 还是 input 元素

$(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();
    }
});

演示