Question

我正在使用HTML输入标记创建一个简单的搜索栏：

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

然后在jQuery中我实现了keypress方法来检测用户何时点击enter / return键：

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

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

感谢。

Answer 1

使用onkeyup()只会检测密钥何时被释放。这应该可以解决你的持有问题。

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

按住enter键 - xx仅记录在发行版上。

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

Answer 2

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

Answer 3

尝试使用Keydown或Keyup事件。只有在密钥从一个状态转换到另一个状态时才会被解雇。

Answer 4

您可以使用计时器，因为您遇到的是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
    }
});

Answer 5

回答上述问题有点晚了。但是我建议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 tie 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 个答案: