Jquery Event Keypress: Which Key Was Pressed

jQuery Event Keypress: Which key was pressed?

Actually this is better:

 var code = e.keyCode || e.which;
if(code == 13) { //Enter keycode
//Do something
}

jQuery Event Keypress: Which key was pressed? A-Z, & @

There are three keyboard events you can trap: keyup, keydown, and keypress. The first two behave the way you've observed, and the latter behaves the way you seem to want.

You need to understand the difference between a key and the character(s) associated with that key.

As explained in the jQuery doco (admittedly it is kind of buried), the keyup and keydown events give a keyCode that corresponds to the actual physical key on the keyboard, so uppercase "A" and lowercase "a" will have the same code, as will "2" and "@" - but note that the "2" key above the "W" has a different code to the "2" key on the numeric keypad. The event.shiftKey property will tell you whether shift was down at the time the key was pressed. Those two events can also check for non-text type keys like the arrow keys, Ctrl, Home, etc.

On the other hand, the keypress event gives a keyCode corresponding to the character, so "A" and "a" will give different keyCodes, as will "2" and "@". So keypress may be better suited to your needs.

(By the way, this isn't a jQuery thing as such, this is normal behaviour even with "plain" JavaScript, though jQuery attempts to normalise behaviour across different browsers. One such normalisation is that jQuery makes sure that event.which will work consistently, so you should use event.which to get the code rather than event.keyCode.)

jQuery on keypress trigger button

You can check the keydown event and catch the left/right arrow key code.

If left/right arrow are pressed trigger the according button, arrow codes:

37 - left

38 - up

39 - right

40 - down

Code:

$('#prev').click(function () {
alert('prev');
});

$('#next').click(function () {
alert('next');
});

$(document).keydown(function (e) {
if (e.keyCode == 37) {
$('#prev').click();
return false;
}
if (e.keyCode == 39) {
$('#next').click();
}
});

Demo: http://jsfiddle.net/IrvinDominin/6CYXH/

How can I detect pressing Enter on the keyboard using jQuery?

The whole point of jQuery is that you don't have to worry about browser differences. I am pretty sure you can safely go with enter being 13 in all browsers. So with that in mind, you can do this:

$(document).on('keypress',function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});

Does 'keypress' jQuery event fire before an inputs value is updated?

I want the button on the page to be disabled until the password and confirm-password fields have matching values

If this is your goal, you can add event listeners to both inputs that call a validation function:

$('#password').on("input", function() { validatePassword(); });

$('#confirm').on("input", function() { validatePassword(); });

function validatePassword() {
if($('#password').val() && $('#confirm').val() && $('#password').val() == $('#confirm').val()) {
$('button').prop('disabled', false);
} else {
$('button').prop('disabled', true);
}
}

It also may be worthwhile adding an ID to the button. Using 'button' would enable/disable all elements on the page.

Example: https://jsfiddle.net/doL4t9vv/1/

JQuery - change and keypress events are giving different results

The change event will be triggered only when you de-focus the input. In contrast, the keypress event will be triggered after you've pressed the key, but before the key press has resulted in the value of the element being changed - this is why you can call event.preventDefault inside a keypress event to prevent the typed character from making its way to the input:

$("#answer").keyup(function () {

console.log('keypress: "' + this.value + '"');

});

$("#answer").change(function () {

console.log('change: "' + this.value + '"');

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea id="answer"></textarea>

Detect when a key is pressed and then released using jQuery

Well you can create a variable, say x. x is false. Separate the keyup and keydown functions. under keydown add an if(!x) and make x true. Under keyup add an if(x) and make x false.
I don't code jquery but I thought this might help.

Using jQuery to listen to keydown event

If you want to capture the keypress anywhere on the page -

$(document).keypress(function(e) {
if(e.which == 13) {
// enter pressed
}
});

Don't worry about the fact this checks for every keypress, it really isn't putting any significant load on the browser.

Capture an Enter Key Pressed anywhere on the page

$(document).keypress(function(e) {
if(e.which == 13) {
// enter pressed
}
});


Related Topics



Leave a reply



Submit