I have a grid with some rows of input boxes. Now I want to trigger some code as user is typing some text in the input box. While it does trigger for most of the keys, for some reason, it is not getting trigerred for left/right arrow keys. What could be the issue ?
$("#my_grid tbody").on('input focus keypress', function(e) {
// Not fired for arrow keys (left/right). Not sure why ?
})
the problem is that arrow keys press are detected on other events like keydown. Check this: Detecting arrow key presses in JavaScript
Use keydown function as well in your .on and detect which arrow was pressed on input.
I have recreated the example below for you.
Run Snippet below.
$("#my_grid").on('input focus keypress keydown', function(e) {
if (e.which == 37) {
alert("left pressed");
} else if (e.which == 38) {
alert("up pressed");
} else if (e.which == 39) {
alert("right pressed");
} else if (e.which == 40) {
alert("down pressed");
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="my_grid" />
Related
So I want to trigger a 'tab' event on a down keypress, and a 'shift+tab' event on a up keypress. Here's what I've got so far, but I can't seem to set the keyCode of the Keypress event. I read that keyCode was being deprecated, but I tried code also (which does set), but it doesn't trigger the action on input.
if (e.keyCode === 38) {
// trigger a shift tab
console.log('up key was pressed')
}
if (e.keyCode === 40) {
console.log('down key was pressed')
let event = new KeyboardEvent('keyPress', { keyCode: 9 })
window.dispatchEvent(event)
}
https://jsfiddle.net/0Lv9bthd/18/ to capture up and down arrow presses you need keydown, can't use keypress
window.addEventListener("keydown", function(e) {
console.log(e.keyCode);
if (e.keyCode == 38) {
console.log('up key was pressed');
}
});
I want to detect the key event of escape while displaying the jquery notification. But as this is blocking the input I'm unable to detecting key board event while noty is showing.
$(document).keyup(function(e) {
if (e.keyCode == 27) {
//your codes
}
});
Use This Code It Works Everywhere:
// define a handler
function doc_keyUp(e) {
if (e.keyCode == 27) {//27 is Esc KeyCode
alert('Escape Key Has Been Pressed!');
}
}
// register the handler
document.addEventListener('keyup', doc_keyUp, false);
You can use onkeyup to pass event handler like-
<input type="text" onkeyup="YourKeyupHandler(event)">
Now you can implement function like-
function YourKeyupHandler(event) {
event = event || window.event || event.srcElement;
if (event.keyCode == 27) {
//here you can do whatever you want
}
}
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 have a problem I can't seem to sort out.
I have a form with a custom styled button (input type=button). When typing in the text field, I want people to be able to press the TAB key and go to the button. However, it won't use a tab-index so my solution was to highlight the label and change the CSS to give the button a new border color. However, the border color will not change on keypress in any browser other than Firefox.
Here is what I have:
$(function() {
$("#email").bind("keypress", function(e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
The first enter keypress is to serialize and email the form and all.
I can't seem to get it to work for the life of me. What am I doing wrong? Is there a better solution to what I'm trying to accomplish?
Thanks for taking the time,
Armik
Use keydown instead, for me that works (see demo: http://jsfiddle.net/npGtX/2/)
$(function () {
$("#email").bind("keydown", function (e) {
if (e.keyCode == 13) {
send();
return false;
};
if (e.keyCode == 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
Also I found this: Suppressing keyPress for non-character keys?
keypress is not necessarily triggered when the keypress is not a
character. So the browser may not trigger an event on backspace, F1,
the down key, etc.
You can use the keyup event and event object's which property, jQuery normalizes the which property and it's cross-browser:
$(function() {
$("#email").bind("keyup", function(e) {
if (e.which == 13) {
send();
return false;
};
if (e.which == 9) {
$("#submit_btn").toggleClass('submit1 submit1after');
};
});
};
$(function() {
$("#email").keypress(function(e) {
if (e.keyCode == 13 || e.which== 13) {
send();
return false;
};
if (e.keyCode == 9 || e.which== 9) {
$("#submit_btn").removeClass('submit1').addClass('submit1after');
};
});
};
How to overwrite or remove key events, that is on a website? I'm writing a script for GreaseMonkey and I want to make event on Enter button, but when I press the ENTER button, it triggers function on website.
EDIT 1: Here is the website, that I need to do this http://lockerz.com/auth/express_signup
One of these two should do it for you. I used the first one, although someone on SO told me the second one will work also. I went for the hammer.
Sorry, first one wasn't a cut and paste answer. I use using it to return up/down arrow control on a website. I changed it so that it identifies keycode 13 instead.
(function() {
function keykiller(event) {
if (event.keyCode == 13 )
{
event.cancelBubble = true;
event.stopPropagation();
return false;
}
}
window.addEventListener('keypress', keykiller, true);
window.addEventListener('keydown', keykiller, true);
})();
Searching quickly on SO:
jQuery Event Keypress: Which key was pressed?
Code from there:
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
//Do something
}
Without a library, use: http://jsfiddle.net/4FBJV/1/.
document.addEventListener('keypress', function(e) {
if(e.keyCode === 13) {
alert('Enter pressed');
return false;
}
});