防止按下回车键时多次调用按键方法答案

【问题标题】：Prevent keypress method to be called multiple times when enter key held down防止按下回车键时多次调用按键方法
【发布时间】：2013-04-22 19:27:09
【问题描述】：

我正在使用 HTML 输入标签制作一个简单的搜索栏：

<input type="text" id="search_bar" />

然后在 jQuery 中我实现了 keypress 方法来检测用户何时按下回车键：

$('#search_bar').keypress(function(e) {
    if(e.keyCode == 13 && !e.shiftKey) { // enter/return
        e.preventDefault();
        //do stuff
    }
});

但是，如果用户决定按住回车键，该方法将被多次调用。我想禁用此行为，即 keypress 仅在用户按 Enter 时调用一次，但在按住键时不会再次调用。实现这一目标的最佳方法是什么？

谢谢。

【问题讨论】：

尝试使用 onkeyup 方法代替api.jquery.com/keyup

标签： javascript jquery html input

【解决方案1】：

使用onkeyup() 只会检测到密钥何时被释放。这应该可以解决您的控股输入问题。

$('#search_bar').keyup(function(e) {
    if(e.keyCode == 13 && !e.shiftKey) { // enter/return
        e.preventDefault();
        console.log("xx");
    }
});

按住回车 -- xx 仅在发布时登录。

小提琴：http://jsfiddle.net/veRkd/

【讨论】：

【解决方案2】：

尝试使用keydown 或keyup。这可能会改变keycode 的值。

【讨论】：

onkeyup 是检测按键的传统行为
当一个键被按住时，keydown 事件会被触发多次。只有 keyup 事件被触发一次

【解决方案3】：

您可以使用计时器，因为您遇到的是 keypress 的行为（keyup 和 keydown 可用于计算按键次数，但跟踪所有 edge cases on all browsers 可能会相当棘手） .

$('#search_bar').keypress(function(e) {
    if(e.keyCode == 13 && !e.shiftKey) { // enter/return
        e.preventDefault();

        if (window.preventDuplicateKeyPresses)
            return;

        window.preventDuplicateKeyPresses = true;
        window.setTimeout(function() { window.preventDuplicateKeyPresses = false; }, 500 );

        //do stuff
    }
});

【讨论】：

您的回答帮助我解决了 vue 问题。谢谢 :)

【解决方案4】：

回答上面的问题有点晚了。但我建议create a debounce function. 该函数只会在每分之一秒内触发一次，而不是在触发时尽快触发。它肯定有助于令人难以置信地提高性能。

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

var apiRequestFunction = debounce(function() {
 //send an AJAX network request.
 //250 indicates the minimum time interval between the series of events being fired
}, 250);

$('#search_bar').keypress(function(e) {
        e.preventDefault();
        //do stuff
        //Function call to send an AJAX network request
        apiRequestFunction();
});

Reference blogpost by David Walsh

【讨论】：

【解决方案5】：

尝试改用Keydown 或Keyup 事件。它们仅在密钥从一种状态更改为另一种状态时才会触发。

【讨论】：