We Keep Coding

Escape key pressing not run keydown event [duplicate]

Possible Duplicate:
Which keycode for escape key with jQuery
How to detect escape key press in IE, Firefox and Chrome?
Below code works in IE and alerts 27, but in Firefox it alerts 0
$('body').keypress(function(e){
alert(e.which);
if(e.which == 27){
// Close my modal window
}
});

Note: keyCode is becoming deprecated, use key instead.
function keyPress (e) {
if(e.key === "Escape") {
// write your logic here.
}
}
Code Snippet:
var msg = document.getElementById('state-msg');
document.body.addEventListener('keypress', function(e) {
if (e.key == "Escape") {
msg.textContent += 'Escape pressed:'
}
});
Press ESC key <span id="state-msg"></span>
keyCode is becoming deprecated
It seems keydown and keyup work, even though keypress may not
$(document).keyup(function(e) {
if (e.key === "Escape") { // escape key maps to keycode `27`
// <DO YOUR WORK HERE>
}
});
Which keycode for escape key with jQuery

The keydown event will work fine for Escape and has the benefit of allowing you to use keyCode in all browsers. Also, you need to attach the listener to document rather than the body.
Update May 2016
keyCode is now in the process of being deprecated and most modern browsers offer the key property now, although you'll still need a fallback for decent browser support for now (at time of writing the current releases of Chrome and Safari don't support it).
Update September 2018
evt.key is now supported by all modern browsers.
document.onkeydown = function(evt) {
evt = evt || window.event;
var isEscape = false;
if ("key" in evt) {
isEscape = (evt.key === "Escape" || evt.key === "Esc");
} else {
isEscape = (evt.keyCode === 27);
}
if (isEscape) {
alert("Escape");
}
};
Click me then press the Escape key

Using JavaScript you can do check working jsfiddle
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
alert('Esc key pressed.');
}
};
Using jQuery you can do check working jsfiddle
jQuery(document).on('keyup',function(evt) {
if (evt.keyCode == 27) {
alert('Esc key pressed.');
}
});

check for keyCode && which & keyup || keydown
$(document).keydown(function(e){
var code = e.keyCode || e.which;
alert(code);
});

Pure JS
you can attach a listener to keyUp event for the document.
Also, if you want to make sure, any other key is not pressed along with Esc key, you can use values of ctrlKey, altKey, and shifkey.
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
//if esc key was not pressed in combination with ctrl or alt or shift
const isNotCombinedKey = !(event.ctrlKey || event.altKey || event.shiftKey);
if (isNotCombinedKey) {
console.log('Escape key was pressed with out any group keys')
}
}
});

pure JS (no JQuery)
document.addEventListener('keydown', function(e) {
if(e.keyCode == 27){
//add your code here
}
});

Below is the code that not only disables the ESC key but also checks the condition where it is pressed and depending on the situation, it will do the action or not.
In this example,
e.preventDefault();
will disable the ESC key-press action.
You may do anything like to hide a div with this:
document.getElementById('myDivId').style.display = 'none';
Where the ESC key pressed is also taken into consideration:
(e.target.nodeName=='BODY')
You may remove this if condition part if you like to apply to this to all. Or you may target INPUT here to only apply this action when the cursor is in input box.
window.addEventListener('keydown', function(e){
if((e.key=='Escape'||e.key=='Esc'||e.keyCode==27) && (e.target.nodeName=='BODY')){
e.preventDefault();
return false;
}
}, true);

Best way is to make function for this
FUNCTION:
$.fn.escape = function (callback) {
return this.each(function () {
$(document).on("keydown", this, function (e) {
var keycode = ((typeof e.keyCode !='undefined' && e.keyCode) ? e.keyCode : e.which);
if (keycode === 27) {
callback.call(this, e);
};
});
});
};
EXAMPLE:
$("#my-div").escape(function () {
alert('Escape!');
})

On Firefox 78 use this ("keypress" doesn't work for Escape key):
function keyPress (e)(){
if (e.key == "Escape"){
//do something here
}
document.addEventListener("keyup", keyPress);

i think the simplest way is vanilla javascript:
document.onkeyup = function(event) {
if (event.keyCode === 27){
//do something here
}
}
Updated: Changed key => keyCode

How to get symbol of pressed key IE8-?

I have this code:
document.onkeydown = function(event) {
if (!event) {
event = window.event;
}
var keyCode = event.keyCode || event.which;
console.log(event);
console.log(keyCode);
}
This works in IE8 browser. But, I still need to know the symbol of the pressed key.
In newer browsers, I can use "e.key". I tried to output event to the console, but I didn't find anything similar to the symbol of the pressed key. How do I solve this?

The answer has been found. This code works even in IE5 (checked on the Emulator).
document.onkeydown = function(event) {
if (!event) {
event = window.event;
}
var keyCode = event.keyCode || event.which;
var pressedKeySymbol = event.key || String.fromCharCode(keyCode).toLowerCase();
console.log(event);
console.log(keyCode);
}
Thank very much to Valerii from the glorious island of Sakhalin.

How to disable keyboard's ContextMenu function with javascript in webpage on chrome?

i would like to disable 'contextmenu' from keyboard key that is called 'menukey'. the key code is 93.
<script type="text/javascript">
document.onkeydown = function (e) {
if (e.which == 93) {
return false;
}
}
</script>
I've tested the above code on some browser application :
✔ IE 10
✔ firefox 22
✔ Opera 12.16
✘ Chrome 28.0.1500.95
? Safari x.x
✔ succeed | ✘ not worked | ? not tested
is there any guys who can fix?
why it's on chrome does not work?

I don't know why the method you're using doesn't work, but you can do this instead:
window.oncontextmenu = function(event) {
return false;
};

You could
Create a flag if the key was pressed
Add an "keydown" EventListener
store if the user pressed the contextmenu key,
Add an "contextmenu" EventListener
if the key was pressed
Prevent the default action
set the flag to false
var keypressed = false;
window.addEventListener ("keydown",function (e) {
if (e.keyCode === 93) keypressed = true;
});
window.addEventListener ("contextmenu",function (e) {
if (keypressed) {
e.preventDefault(e);
keypressed = false;
}
})
The idea is to hide the contextmenu only on the key pressed, as the title indicates, but still allows it on mouseclicks etc.
If you want to completely disable it, go for #nnnnnn's Answer instead =)
Heres a Fiddle
Only tested in Chrome 29

Disable full keyboard without tab:
document.onkeydown = function (e) {
if (e.which == 9) {
return true;
}
else{
return false;
}
};

Key HIT/press event

I want to take key press event, ut this is not on specific field, its on page/window.
Example:
While doing automation, on web page I have short-cut key suppose M (keyboard key). So how should I achieve this? If it can be achieved by inserting a JavaScript then how can I write it? I'm beginner in JavaScript.

Using jquery you can do this as follow.
$(document).keydown(function(e){
if (e.keyCode == 77) {
alert( "M key pressed" );
}
});

Try the following code:
<script>
function keyEvent (e) {
if (!e)
e = window.event;
if (e.which) {
keycode = e.which;
} else if (e.keyCode) {
keycode = e.keyCode;
}
if(keycode == 77){
alert('Hi!');
}
}
document.onkeydown = keyEvent;
</script>

As you want it on the window I would add a eventListener function direct on the window object like this. You can google the keyCode if you want to change keyCode. This works with and without jQuery library :) http://jsfiddle.net
window.addEventListener('keypress', function(e) {
e = e || window.event;
switch(e.which) {
case 77:
if (e.ctrlKey) {
alert( "M + ctrlKey is down" );
// do some here
}
else {
alert("M is down")
}
break;
}
}, false);

how to check when field enter/return has been pressed on?

I have multiple fields, typically enter will be pressed on one of the two main ones. I want to know which field enter has been pressed on, how do i do this? (i dont know much JS)

its simple to add an "onkeypress" event to each of the fields, and then in the event handler to examine the keycode that is attached to the event. For example, consider the following code:
form.elements['fieldone'].onkeypress = function(evt) {
if (window.event) evt = window.event; // support IE
if (evt.keyCode == 13) alert("Enter was pressed!");
return true;
}
Please note that under most browsers, pressing ENTER in a form field would post that form. If you don't want that to happen, you can simply return false from the onkeypress handler and that would tell the browser to ignore that key.

Check for enter and set some hidden field (example uses JQuery):
$('#input_text').keyup(function(e) {
//alert(e.keyCode);
if(e.keyCode == 13) {
alert('Enter key was pressed.');
}
});

Include this in your page, it should fire automatically when you hit any key and tell you which html element had focus when it happened.
<script>
document.onkeypress = KeyPressed;
function KeyPressed(e)
{
if (!e) e = window.event;
f ((e.charCode) && (e.keyCode == 13))
alert('Yay! Enter was pressed while field ' + document.activeElement.id + ' had focus!');
}
</script>

You can check from which element the event bubbled from using something like the following
var text1 = document.getElementById('text1');
var text2 = document.getElementById('text2');
text1.onkeypress = keyPresser;
text2.onkeypress = keyPresser;
function keyPresser(e) {
// to support IE event model
var e = e || window.event;
var originalElement = e.srcElement || e.originalTarget;
if (e.keyCode === 13) {
alert(originalElement.id);
}
}
Here's a Working Demo
I would recommend taking a look at the differences in Browser event models and also at unobtrusive JavaScript .
QuirksMode - Introduction to Events
The IE Event Model
Pro JavaScript Techniques - Unobtrusive Event Binding

Use event delegation to avoid attaching event handlers to a large number of elements:
window.onload = function () {
document.onkeyup = function (e) {
e = e || window.event;
var target = e.target || e.srcElement,
keyCode = e.keyCode || e.which;
if (target.tagName.toLowerCase() == 'input' && keyCode == 13) {
alert('Enter pressed on ' + target.id);
}
};
};