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
JavaScript - Sort Array Based on Another Array
Canvascontext2D Drawimage() Issue [Onload and Cors]
How to Access Post Form Fields in Express
Working With $Scope.$Emit and $Scope.$On
JavaScript File Upload Size Validation
Filter Array of Objects Based on Another Array in JavaScript
A Partial View Passing a Collection Using the Html.Begincollectionitem Helper
Get a Random Item from a JavaScript Array
Await Is Only Valid in Async Function
Map Function For Objects (Instead of Arrays)
What Do Parentheses Surrounding an Object/Function/Class Declaration Mean
How to Check That a Number Is Nan in JavaScript
How to Get a Key in a JavaScript Object by Its Value
How to Create an Accurate Timer in JavaScript
Is It Right to Think of a JavaScript Function Expression That Uses the 'New' Keyword as 'Static'