CODEWITHSUNDEEP
javascriptjquery
darkness
darkness

Reputation: 225

how to delay keypress enter

window.addEventListener('keydown', function(event) {
     onKeyDownHandler(event);
}, false);


function onKeyDownHandler(e)
{
    var focus_id = e.target.id;
    switch (e.keyCode) {
          case 13: // enter
          if(focus_id == "Text1")
          {
            alert("function 1");
          }else if(focus_id == "Text2")
          {
            alert("function 2");
          }else if(focus_id == "Text3")
          {
            alert("function 3");
          }
          return;
    }
}

is there anyway i can delay or make sure user dont spam by clicking the enter , how do i set keypress delay on my enter button ? which is the best way set delay timer or remove EventListener?

Upvotes: 0

Views: 1924

Answers (3)

minitauros
minitauros

Reputation: 2030

You can create a timeout on enter press, and on another enter press, overwrite that previous timeout with the new one. That means that if you for example press enter again before the first timeout has ended, that first timeout will be overwritten by a new one, so that you get a new x amount of time before the actual timeout is executed. This works until infinity.

Example:

var keyup_timeout;
var timeout_delay_in_ms = 500;

element.on('keyup', function(e) {
    e.preventDefault(); // Prevent default enter press action.
    var enter_pressed;

    if (e.which === 13) {
        enter_pressed = true; // Just an example to illustrate what you could do.
    }

    if (enter_pressed) {
        clearTimeout(keyup_timeout); // Clear the previous timeout so that it won't be executed any more. It will be overwritten by a new one below.

        keyup_timeout = setTimeout(function() {

            // Perform your magic here.

        }, timeout_delay_in_ms);
    }
});

Upvotes: 0

Sjoerd
Sjoerd

Reputation: 75588

You can use the jQuery throttle/debounce plugin to only handle call your function when there is a pause in keyDown events.

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074148

You can prevent the default action for a period of time after the last Enter keypress:

window.addEventListener('keydown', onKeyDownHandler, false);
var lastEnter = null;
function onKeyDownHandler(e) {
    var focus_id = e.target.id;
    switch (e.which || e.keyCode) { // Note the e.which, for x-browser compat
        case 13:
            if (lastEnter && Date.now() - lastEnter < 5000) {
                e.preventDefault();
                return;
            }
            lastEnter = Date.now();

            // Enter key processing...
            break;
        // ...other keys...
    }
}

Or using jQuery (you've tagged your question jquery, but don't appear to be using jQuery in your code):

$(window).on("keydown", function(e) {
    onKeyDownHandler(e);
});
var lastEnter = null;
function onKeyDownHandler(e) {
    var focus_id = e.target.id;
    switch (e.which) { // jQuery normalizes this for you
        case 13:
            if (lastEnter && Date.now() - lastEnter < 5000) {
                e.preventDefault();
                return;
            }
            lastEnter = Date.now();

            // Enter key processing...
            break;
        // ...other keys...
    }
}

Side notes:

  • Since the return value of an addEventListener callback is completely ignored and addEventListener calls the handler with just a single argument, if you're not using this within the handler (as you appear not to be), there's no need to wrap a function around onKeyDownHandler; just use it directly.
  • Some browsers use which for the keycode, others use keyCode, which is why I used e.which || e.keyCode in the switch. JavaScript's curiously-powerful || operator will use e.which if it's not falsey, e.keyCode otherwise.

Upvotes: 1

Related Questions