当按住输入键时，防止按键方法被多次调用

Question

I am making a simple search bar using the HTML input tag:

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

Then in jQuery I implement the keypress method to detect when the user hits the enter/return key:

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

However, if the user decides the hold down the enter key, this method will be called multiple times. I want to disable this behavior, ie keypress only called once when the user hits enter but not called again when the key is held down. What is the best way to accomplish this?

Thanks.

Answer 1

Using onkeyup() will only detect when the key has been released. This should solve your holding enter problem.

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

Hold down enter -- xx is only logged on the release.

Fiddle: http://jsfiddle.net/veRkd/

Answer 2

Try using keydown or keyup . That will probably change the keycode value.

Answer 3

This is bit late to answer above question. But I would suggest to create a debounce function. The function will only fire once every fraction of a second instead of as quickly as it's triggered. It surely helps to boost the performance incredibly.

// 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

Answer 4

Try using either the Keydown or Keyup event instead. They're only fired in the event of the key changing from one state to the other.

Answer 5

You could use a timer since what you are experiencing is the behavior of keypress ( keyup and keydown could be used for counting the key presses but it will probably be rather tricky to track all 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
    }
});