We Keep Coding

Ignore keyup for a few seconds for ux

I have a multistep form using jquery validator plugin that also goes to the next page when you press enter.
function showPage(pg){
$('formError').empty();
$('table:visible').hide();
$('#page-' + pg).show();
$('input[type="text"]:visible').focus();
}
$(document).keydown(function(e) {
if(e.which == 13) {
if($('#msform :input:visible').valid()){
page++;
showPage(page);
}}});
The issue is that if you use the enter button, it triggers a validation error on the next page because the button is still being pressed and it tries to go to the next page.
How can I ignore the enter key for a small period so that releasing the enter key works to go to the next page without attempting to go to the page after the next page?

You can wait for the corresponding keyup event before taking in account a new keydown event for the enter key.
pressed = {};
$(document).keydown(function(e){
if(pressed[e.which] == null && e.which == '13'){
if($('#msform :input:visible').valid()) {
page++;
showPage(page);
}
}
pressed[e.which] = true;
});
$(document).keyup(function(e) {
pressed[e.which] = null;
});

You can use setTimeout() function like this
$(document).keydown(function(e) {
setTimeout(myFunction(),500);
});
function myFunction(){
if(e.which == 13) {
if($('#msform :input:visible').valid()){
page++;
showPage(page);
}}
}
::::::::::::::::::Update::::::::::::::::::
$(document).keydown(function(e) {
if(e.which == 13) {
setTimeout(myFunction(),500);
}
});
function myFunction(){
if($('#msform :input:visible').valid()){
page++;
showPage(page);
}
}

Keypress to change class in jQuery

I have a problem I can't seem to sort out.
I have a form with a custom styled button (input type=button). When typing in the text field, I want people to be able to press the TAB key and go to the button. However, it won't use a tab-index so my solution was to highlight the label and change the CSS to give the button a new border color. However, the border color will not change on keypress in any browser other than Firefox.
Here is what I have:
$(function() {
$("#email").bind("keypress", function(e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
The first enter keypress is to serialize and email the form and all.
I can't seem to get it to work for the life of me. What am I doing wrong? Is there a better solution to what I'm trying to accomplish?
Thanks for taking the time,
Armik

Use keydown instead, for me that works (see demo: http://jsfiddle.net/npGtX/2/)
$(function () {
$("#email").bind("keydown", function (e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
Also I found this: Suppressing keyPress for non-character keys?
keypress is not necessarily triggered when the keypress is not a
character. So the browser may not trigger an event on backspace, F1,
the down key, etc.

You can use the keyup event and event object's which property, jQuery normalizes the which property and it's cross-browser:
$(function() {
$("#email").bind("keyup", function(e) {
if (e.which == 13) {
send();
return false;
};
if (e.which == 9) {
$("#submit_btn").toggleClass('submit1 submit1after');
};
});
};

$(function() {
$("#email").keypress(function(e) {
if (e.keyCode == 13 || e.which== 13) {
send();
return false;
};
if (e.keyCode == 9 || e.which== 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};

'Alt' keyup event don't work on Firefox

i try to capture this key : alt+arrow down, alt+arrow up.
First, i capture alt key down :
var isAlt = false;
$(document).keydown(function (e) {
if(e.which == 18){isAlt=true;}
}).keyup(function (e) {
if(e.which == 18){isAlt=false;}
});
this code is ok, and alt keyup is detected.
But, if i add arrow key down, when arrow keydown, it's ok, but after alt keyup is not detected :
var isAlt = false;
$(document).keydown(function (e) {
if(e.which == 18){isAlt=true;}else{
if(e.which == 38 && isAlt == true) {
//action code here work
console.log('action ok');
}
}
}).keyup(function (e) {
if(e.which == 18){isAlt=false;}
});
You can try this on console, and after log 'action ok', you need press again alt key for "isAlt = false".
But, this code work fine on Chrome.
Anyone have one idea for correct this bug ?

You need to check the event.altKey property: https://developer.mozilla.org/en/DOM/KeyboardEvent

Disable keydown shortcuts if input(s) is focused

I have few inputs which you focus them using keycodes.
I am trying to: when focus on inputs, disable the keycodes function and when not focused, enable.
I tried this:
var hotkeys_function = false;
if (!hotkeys_function ){
$(document).keydown(function(e) {
if (e.keyCode == 71) {
$("#input1").fadeIn();
$("#input1").focus().select();
var hotkeys_function = true;
}
});
}
And this:
if ($("#input1").select()) {
var hotkeys_function = true;
}
but none seem to be working.

Not $("#input1").select() but $("#input1").focus().
In fact, no variables are needed, you can just check and return dynamically whether an input is focused or not.
$(document).keydown(function(event) {
if($("#input1").is(":focus")) return; //Will fail if already focused.
if (event.keyCode == 71) { //g
$("#input1").fadeIn();
$("#input1").focus().select();
}
});
Working example.

What you could do is this, without any other variables: http://jsfiddle.net/pimvdb/YnVPQ/.
$(document).keydown(function(e) {
if (e.keyCode == 71) {
if($("input").is(":focus")) return; // abort if any focused textboxes
$("#input1").fadeIn();
$("#input1").focus().select();
}
});

Overwriting key events

How to overwrite or remove key events, that is on a website? I'm writing a script for GreaseMonkey and I want to make event on Enter button, but when I press the ENTER button, it triggers function on website.
EDIT 1: Here is the website, that I need to do this http://lockerz.com/auth/express_signup

One of these two should do it for you. I used the first one, although someone on SO told me the second one will work also. I went for the hammer.
Sorry, first one wasn't a cut and paste answer. I use using it to return up/down arrow control on a website. I changed it so that it identifies keycode 13 instead.
(function() {
function keykiller(event) {
if (event.keyCode == 13 )
{
event.cancelBubble = true;
event.stopPropagation();
return false;
}
}
window.addEventListener('keypress', keykiller, true);
window.addEventListener('keydown', keykiller, true);
})();

Searching quickly on SO:
jQuery Event Keypress: Which key was pressed?
Code from there:
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
//Do something
}

Without a library, use: http://jsfiddle.net/4FBJV/1/.
document.addEventListener('keypress', function(e) {
if(e.keyCode === 13) {
alert('Enter pressed');
return false;
}
});