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);
Related
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
I want to hide the "suggested" options list that appears underneath the search input when you start typing something on the Wordpress search plugin, what I need specifically is to fire the "Escape" key event when I press down the "Delete" key, I tried the following jquery function but it doesn't work as I expected.
$('form.search-form').keydown(function (e) {
// keycode for Delete key
if (e.keyCode == 46) {
var a = $.Event("keydown");
// keycode for Esc key
a.which = 27;
a.keyCode = 27;
$(document).trigger(a);
}});
Any help? Thanks in advance
Updated (original question was unclear)
Live demo here (click).
When the delete key is pressed, change the keyCode to the esc key, then use trigger to simulate a press of esc.
$('input').keydown(function (e) {
// keycode for delete
if (e.keyCode == 46) {
console.log('delete key pressed.');
e.keyCode = 27;
$(this.target).trigger(e);
}
});
$('input').keydown(function (e) {
// keycode for esc
if (e.keyCode == 27) {
console.log('esc key pressed.');
}
});
Old answer (leaving this here because it is similar.)
Your question is an X/Y problem. You don't need to fire another keydown, event, you just need to repeat the same functionality, so extract the esc event's code into a function and reuse in the del key's event. Live demo here (click).
$('input').keydown(function (e) {
// keycode for delete
if (e.keyCode == 46) {
myFunction(e);
}
});
$('input').keydown(function (e) {
// keycode for esc
if (e.keyCode == 27) {
myFunction(e);
}
});
function myFunction() {
alert('Look, Ma! Code reuse!');
}
Better yet, do this! Live demo here (click).
$('input').keydown(function (e) {
// keycodes for delete and esc
if (e.keyCode == 46 || e.keyCode == 27) {
myFunction(e);
}
});
function myFunction() {
alert('Look, Ma! Code optimization!');
}
I am trying to figure out when a key press is an empty space, so I did the following:
if (e.which == ' '){
}
however this does not work. Any idea why?
event.which returns the code of the character pressed. space key code is 32, so use it instead:
if (e.which === 32) {
//
}
Another way is to convert character to char code with .charCodeAt():
if (e.which === " ".charCodeAt(0)) {
//
}
CHECK: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
Write a test code and alert what the keyCode is.
document.onkeypress = function(e) {
e = e || window.event;
console.log(e.keyCode || e.which);
};
Learn to debug and you would not be asking these simple questions.
jQuery would have been
$(document).keypress(
function (e) {
console.log(e.which);
}
);
Probably this is what you're looking for: (Assuming you use the keydown event.)
if(e.keyCode == '32') {
// Your code
}
jsFiddle:
http://jsfiddle.net/DeHFL/
I want to disable F8 key on my web page. Is there any way I can disable it using jquery or any associated plugins or just javascript??
Thanks in advance... :)
blasteralfred
Like this Disable F5 key in Safari 4
but using keyCode 119:
<script>
var fn = function (e)
{
if (!e)
var e = window.event;
var keycode = e.keyCode;
if (e.which)
keycode = e.which;
var src = e.srcElement;
if (e.target)
src = e.target;
// 119 = F8
if (119 == keycode)
{
alert('nope')
// Firefox and other non IE browsers
if (e.preventDefault)
{
e.preventDefault();
e.stopPropagation();
}
// Internet Explorer
else if (e.keyCode)
{
e.keyCode = 0;
e.returnValue = false;
e.cancelBubble = true;
}
return false;
}
}
document.onkeypress=document.onkeydown=document.onkeyup=fn
</script>
Have you tried something like this?
$(document).keydown(function(e){
if(e.which === 119){
return false;
}
});
i created a jsfiddle sandbox where you can test it (works):
http://jsfiddle.net/alzclarke/yW6H3/
The following code works on most browser whereas I haven't found any incompatible one yet. Let me know if it doesn't work.
The key is to re-map target event to any other original event of trivial key, i.e., make that Fn key behave as normal key.
$(document).bind("keydown", function (evt){
var keycode = (evt.keyCode?evt.keyCode:evt.charCode);
//alert(keycode);
switch(keycode){
case 119: //F8 key on Windows and most browsers
case 63243: //F8 key on Mac Safari
evt.preventDefault();
//Remapping event
evt.originalEvent.keyCode = 0;
return false;
break;
}
});
Reference on key code and explanation on cross browser issue can be found here:
quirksmode
I am using this code snippet to add KeyDown event handler to any element in the html form
for(var i=0;i<ele.length;i++)
{
ele[i].onkeydown = function()
{
alert('onkeydown');
}
}
How can I know which key has been pressed on keydown event? I try this
for(var i=0;i<ele.length;i++)
{
ele[i].onkeydown = function(e)
{
alert(e.KeyCode);
}
}
but it is not working, why?
Thanks a lot
This is the code I use for this problem. It works in every browser.
//handle "keypress" for all "real characters"
if (event.type == "keydown") {
//some browsers support evt.charCode, some only evt.keyCode
if (event.charCode) {
var charCode = event.charCode;
}
else {
var charCode = event.keyCode;
}
}
For detecting Enter, you could use the following code, which will work in all mainstream browsers. It uses the keypress event rather than keydown because Enter produces a printable character:
ele[i].onkeypress = function(evt) {
evt = evt || window.event;
var charCode = evt.keyCode || evt.which;
if (charCode == 13) {
alert("Enter");
// Do stuff here
}
};
I used this:
function check(){
if (event.keyCode == 32){
alert("Space is pressed");
}
}
and in my body tag: onKeyPress="check()"
It is keyCode, not KeyCode.