I'm working with javascript (on a macbook pro OSX 10.11.x, not sure if this matters) using Chrome browser.
Im using the function:
window.onkeypress = function(e) {
var key = e.keyCode ? e.keyCode : e.which;
console.log("keypressed = " + key);
}
when i press 'a' key on my keyboard, it logs as 97, however this does not correspond to any other keyCode list i find on the internet, which states 'a' is 65.
This is the same for other keys as well, for example, 's' for me is 115, but everyone else states that 's' is 83.
Is there a dependency that i'm missing? If i fire an event assuming a == 95, will it work on other browsers?
Thanks.
So I found that a capital A is indeed, 65.
A lowercase a is 97
Please see this chart:
Chart original location: http://www.asciitable.com/
Capital letters are not the same as lower-case and produce different codes.
Also, the keypress event works differently than the keyup or keydown events. keypress responds to printable characters and gives the code of the character that was produced. With keyup and keydown, the code represents the physical hardware key on the keyboard that was pressed. For example, if you run the snippet below and just press the SHIFT key, you will not see the keypress event log message at all because that event doesn't fire for that key.
window.addEventListener("keyup", function(e) {
var key = e.keyCode ? e.keyCode : e.which;
console.log("key up = " + key, e.key);
});
window.addEventListener("keydown", function(e) {
var key = e.keyCode ? e.keyCode : e.which;
console.log("key down = " + key, e.key);
});
window.addEventListener("keypress", function(e) {
var key = e.keyCode ? e.keyCode : e.which;
console.log("key pressed = " + key, e.key);
});
Just click in this area to give it the focus, then press some keys.
Related
I googled the answer in couple ways but couldn't find a good answer without any library. It was also not asked in stackoverflow. So I thought it might also be helpful to someone else as well. I know I can detect window keyup or down event but how can I detect Ctrl + F11 event in the same time?
$(window).keypress(function (e) {
var keyCode = e.which;
if (keyCode == 122) {
console.log("You pressed f11");
}
})
Thank you.
Using Javascript:
document.onkeydown = keydown;
function keydown(e) {
var evtobj = window.event ? event : e
if (evtobj.keyCode == 122 && evtobj.ctrlKey)
alert("[JS] Ctrl + F11 pressed");
}
<p>Press Ctrl + F11</p>
More Info:
KeyboardEvent.ctrlKey
Keycodes Info
Using jQuery:
$(document).keydown(function(e) {
if (e.which == 122 && e.ctrlKey)
alert("[jQuery] Ctrl + F11 pressed");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Press Ctrl + F11</p>
More Info:
Event Object
I am creating a webapp for android device using html5,javascript and css3. I have a screen which has a textarea. User can enter his comments in the textarea. On clicking the android enter/return key of keyboard, the cursor should move to next line in the textarea.
Any help on this feature ?
I tried many ways. like
$('#reply').bind('keyup', function(e) {
var data = $('#reply').val();
logger.debug("data = " + data);
$('#reply').text(data.replace(/\n/g,"<br />"));
});
#reply is the id of my textarea.
No luck....
Return key can be checked using this key code 13 and just append newline character to force user to write on newline:
$("#reply").on('keydown', function(e) {
var code = e.keyCode || e.which;
if(code == 13) { //Enter keycode
event.preventDefault();
var s = $(this).val();
$(this).val(s+"\n");
}
});
I am trying to capture ctrl+z key combination in javascript with this code:
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<script type='text/javascript'>
function KeyPress(e) {
var evtobj = window.event? event : e
//test1 if (evtobj.ctrlKey) alert("Ctrl");
//test2 if (evtobj.keyCode == 122) alert("z");
//test 1 & 2
if (evtobj.keyCode == 122 && evtobj.ctrlKey) alert("Ctrl+z");
}
document.onkeypress = KeyPress;
</script>
</body>
</html>
Commented line "test1" generates the alert if I hold down the ctrl key and press any other key.
Commented line "test2" generates the alert if I press the z key.
Put them together as per the line after "test 1 & 2", and holding down the ctrl key then pressing the z key does not generate the alert as expected.
What is wrong with the code?
Use onkeydown (or onkeyup), not onkeypress
Use keyCode 90, not 122
function KeyPress(e) {
var evtobj = window.event? event : e
if (evtobj.keyCode == 90 && evtobj.ctrlKey) alert("Ctrl+z");
}
document.onkeydown = KeyPress;
Online demo: http://jsfiddle.net/29sVC/
To clarify, keycodes are not the same as character codes.
Character codes are for text (they differ depending on the encoding, but in a lot of cases 0-127 remain ASCII codes). Key codes map to keys on a keyboard. For example, in unicode character 0x22909 means 好. There aren't many keyboards (if any) who actually have a key for this.
The OS takes care of transforming keystrokes to character codes using the input methods that the user configured. The results are sent to the keypress event. (Whereas keydown and keyup respond to the user pressing buttons, not typing text.)
For future folks who stumble upon this question, here’s a better method to get the job done:
document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.key === 'z') {
alert('Undo!');
}
});
Using event.key greatly simplifies the code, removing hardcoded constants. It has support for IE 9+.
Additionally, using document.addEventListener means you won’t clobber other listeners to the same event.
Finally, there is no reason to use window.event. It’s actively discouraged and can result in fragile code.
Ctrl+t is also possible...just use the keycode as 84 like
if (evtobj.ctrlKey && evtobj.keyCode == 84)
alert("Ctrl+t");
$(document).keydown(function(e){
if( e.which === 89 && e.ctrlKey ){
alert('control + y');
}
else if( e.which === 90 && e.ctrlKey ){
alert('control + z');
}
});
Demo
document.onkeydown = function (e) {
var special = e.ctrlKey || e.shiftKey;
var key = e.charCode || e.keyCode;
console.log(key.length);
if (special && key == 38 || special && key == 40 ) {
// enter key do nothing
e.preventDefault();
}
}
here is a way to block two keys, either shift+ or Ctrl+ key combinations.
&& helps with the key combinations, without the combinations, it blocks all ctrl or shift keys.
90 is the Z key and this will do the necessary capture...
function KeyPress(e){
// Ensure event is not null
e = e || window.event;
if ((e.which == 90 || e.keyCode == 90) && e.ctrlKey) {
// Ctrl + Z
// Do Something
}
}
Depending on your requirements you may wish to add a e.preventDefault(); within your if statement to exclusively perform your custom functionality.
The KeyboardEvent.keyCode is deprecated (link) think about using KeyboardEvent.key instead (link).
So, the solution would be something like this.
if (e.key === "z" && e.ctrlKey) {
alert('ctrl+z');
}
You can actually see it all in the KeyboardEvent when you use keydown event
Use this code for CTRL+Z. keycode for Z in keydown is 90 and the CTRL+Z is ctrlKey. check this keycode in your console area
$(document).on("keydown", function(e) {
console.log(e.keyCode, e.ctrlKey);
/*ctrl+z*/
if (e.keyCode === 90 && e.ctrlKey) { // this is confirmed with MacBook pro Monterey on 1, Aug 2022
{
//your code here
}
});
The javascript event object offers keyCode() and charCode() methods such that charCode() returns 0 for keys that don't cause a character to be displayed like enter, key up, key down, delete, backspace, etc.
I want to check for exactly these characters inside a jQuery keypress event callback, but the jQuery event object doesn't give me access to the mentioned methods.
Can I retrieve the js event object from the jQuery one ?
$('#yourid').bind('keypress', function(e) {
var keycode= (e.keyCode ? e.keyCode : e.which);
if(keycode == 13){
// Enter pressed... do anything here...
}else if(keycode == 46){// delete
}else if(keycode == 8){ // backspace
}
});
Explorer doesn't fire the keypress event for delete, end, enter, escape, function keys, home, insert, pageUp/Down and tab.
If you need to detect these keys, do yourself a favour and search for their keyCode onkeydown/up, and ignore both onkeypress and charCode.
Key code lists are available all over the internet though here is the heavy lifting done for you without depending on any frameworks...
if (window.addEventListener) {document.addEventListener('keydown',keyPressed,false);}
else {document.attachEvent('onkeydown',keyPressed);}
function keyPressed(evt)
{
var e = evt || event;
var key = e.which || e.keyCode;
if (!powerKeysEnabled) return;
if (showmeallcodes) {alert( key); return;}
switch (key)
{
case 77:// M
alert('m key pressed');
break;
case 76://L
alert('L key pressed');
break;
}
}
I want to get the keyboard typed text, not the key code. For example, I press shift+f, I get the "F", instead of listen to two key codes. Another example, I click F3, I input nothing. How can I know that in js?
To do it document-wide, use the keypress event as follows. No other currently widely supported key event will do:
document.onkeypress = function(e) {
e = e || window.event;
var charCode = (typeof e.which == "number") ? e.which : e.keyCode;
if (charCode) {
alert("Character typed: " + String.fromCharCode(charCode));
}
};
For all key-related JavaScript matters, I recommend Jan Wolter's excellent article: http://unixpapa.com/js/key.html
I use jQuery to do something like this:
$('#searchbox input').on('keypress', function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) {
//Enter keycode
//Do something
}
});
EDIT: Since you're not binding to text box use:
$(window).on('keypress', function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) {
//Enter keycode
//Do something
}
});
http://docs.jquery.com/Main_Page
You can listen for the onkeypress event. However, instead of just examining either the event.keyCode (IE) or event.which (Mozilla) property which gives you the key code, you need to translate the key code using String.fromCharCode().
A good demo is at Javascript Char Codes (Key Codes). View the source and look for the displayKeyCode(evt) function.
Additional references: w3schools - onkeypress Event and w3schools - JavaScript fromCharCode() method.
This is too complicated to answer quickly. This is what I use as the definitive reference for keyboard handling. http://unixpapa.com/js/key.html