How to trigger arrowkey presses in Chrome? - javascript

In chrome(windows), I can capture keypresses on characters, but not on the arrowkeys. See sample-code below:
$('body').on('keypress', function(e) {
console.log('Only works on charcters, in chrome')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
How can I capture arrow-key-presses?

Try changing keypress to keyup:
$('body').on('keyup', function(e) {
console.log('Works on everything :)')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I think keydown is working fine
$('body').on('keydown', function(e) {
console.log('Only works on charcters, in chrome')
});
Fiddle

I really like this module for key press triggers:
https://github.com/madrobby/keymaster
It really reduces the amount of boilerplate code you need to write when working with key presses.
// define short of 'down'
key('down', function(){ alert('you pressed down') });

How can I capture arrow-key-presses?
Use e.keyCode to detect which key is pressed.
Like this :
$('body').on('keyup', function(e) {
if (e.keyCode == '38') {
alert("up arrow");
}
else if (e.keyCode == '40') {
alert("down arrow");
}
else if (e.keyCode == '37') {
alert("left arrow");
}
else if (e.keyCode == '39') {
alert("right arrow");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Related

How I can detect Key "Enter" on "input" event? [duplicate]

I'm trying to do a function if enter is pressed while on specific input.
What I'm I doing wrong?
$(document).keyup(function (e) {
if ($(".input1").is(":focus") && (e.keyCode == 13)) {
// Do something
}
});
Is there a better way of doing this which would say, if enter pressed on .input1 do function?
$(".input1").on('keyup', function (e) {
if (e.key === 'Enter' || e.keyCode === 13) {
// Do something
}
});
// e.key is the modern way of detecting keys
// e.keyCode is deprecated (left here for for legacy browsers support)
// keyup is not compatible with Jquery select(), Keydown is.
event.key === "Enter"
More recent and much cleaner: use event.key. No more arbitrary number codes!
NOTE: The old properties (.keyCode and .which) are Deprecated.
const node = document.getElementsByClassName("input1")[0];
node.addEventListener("keyup", function(event) {
if (event.key === "Enter") {
// Do work
}
});
Modern style, with lambda and destructuring
node.addEventListener("keyup", ({key}) => {
if (key === "Enter") {
// Do work
}
})
If you must use jQuery:
$(document).keyup(function(event) {
if ($(".input1").is(":focus") && event.key == "Enter") {
// Do work
}
});
Mozilla Docs
Supported Browsers
$(document).keyup(function (e) {
if ($(".input1:focus") && (e.keyCode === 13)) {
alert('ya!')
}
});
Or just bind to the input itself
$('.input1').keyup(function (e) {
if (e.keyCode === 13) {
alert('ya!')
}
});
To figure out which keyCode you need, use the website http://keycode.info
Try this to detect the Enter key pressed in a textbox.
$(function(){
$(".input1").keyup(function (e) {
if (e.which == 13) {
// Enter key pressed
}
});
});
The best way I found is using keydown ( the keyup doesn't work well for me).
Note: I also disabled the form submit because usually when you like to do some actions when pressing Enter Key the only think you do not like is to submit the form :)
$('input').keydown( function( event ) {
if ( event.which === 13 ) {
// Do something
// Disable sending the related form
event.preventDefault();
return false;
}
});
It may be too late to answer this question. But the following code simply prevents the enter key. Just copy and paste should work.
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>
The solution that work for me is the following
$("#element").addEventListener("keyup", function(event) {
if (event.key === "Enter") {
// do something
}
});
Try this to detect the Enter key pressed in a textbox.
$(document).on("keypress", "input", function(e){
if(e.which == 13){
alert("Enter key pressed");
}
});
DEMO
A solution that worked for me is this:
<input onkeydown="if (event.key == 'Enter'){//do logic}else{}">
$(document).ready(function () {
$(".input1").keyup(function (e) {
if (e.keyCode == 13) {
// Do something
}
});
});
This code handled every input for me in the whole site. It checks for the ENTER KEY inside an INPUT field and doesn't stop on TEXTAREA or other places.
$(document).on("keydown", "input", function(e){
if(e.which == 13){
event.preventDefault();
return false;
}
});
Here is what I did for my angular project:
HTML:
<input
class="form-control"
[(ngModel)]="searchFirstName"
(keyup)="keyUpEnter($event)"
/>
TypeScript:
keyUpEnter(event: KeyboardEvent) {
if (event.key == 'Enter') {
console.log(event);
}
}

Jquery binding key to body except a class

I'm trying to bind a key to my entire page except to one class of elements.
$('*').not('.textarea-note').keypress(function (event) {
// if key pressed is space
if (event.which == 32) {
alert('space pressed');
event.preventDefault();
}
});
The problem is that I need to do the preventDefault() and when I'm in a textarea then I can't make a space caracter.
Am I doing something wrong or it's not possible to bind to everything except some class or something.
Thanks in advance !
Edit :
After the comment from Roland, I came up with this instead which is working perfectly.
$(document).keypress(function (event) {
// if key pressed is space
if (event.which == 32 && event.target.nodeName != "TEXTAREA") {
if (videoPlaying) {
pauseVideo();
} else {
playVideo();
}
event.preventDefault();
}
});
I think you are looking for this...
$(document).keypress(function(event) {
// if key pressed is space
if (event.which == 32) {
if (event.target.id !== "a1") {// for class $(event.target).attr('class')
alert('space pressed');
event.preventDefault();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="a1"></textarea>
<textarea id="a2"></textarea>
<textarea id="a3"></textarea>

jQuery - How to trigger a function when Ctrl + S is pressed?

$(window).keypress(function(event) {
if (event.which == 115 && event.ctrlKey){
myfunction();
}
});
myfunction(){
alert("Key pressed Ctrl+s");
}
When Ctrl+S was pressed, I don't see this myfunction is trigger. Can anyone help.? I am new to jQuery. Thanks in advance.
Listen for keyup and keydown. Also, the key code for 's' is 83. This reliably works:
$(document).bind("keyup keydown", function(e){
if(e.ctrlKey && e.which == 83){
myfunction();
}
});
function myfunction(){
alert("Key pressed Ctrl+s");
}
Function definition is wrong:
This should work
$(window).keypress(function(event) {
if (event.which == 115 && event.ctrlKey){
myfunction();
return false;
}
});
function myfunction(){
alert("Key pressed Ctrl+s");
}
As Prabhas said, your function definition was wrong.
But you'll also need to use keydown, not keypress.
Plain Javascript (which could be unreliable b/c some browsers use event.charCode and others event.keyCode):
window.addEventListener('keydown', function(e) {
if (e.keyCode == 83 && event.ctrlKey) {
myfunction();
}
});
jQuery (which normalises event.which for charCode and keyCode, see: http://api.jquery.com/event.which/):
$(document).bind("keydown", function(e) {
if(e.which == 83 && event.ctrlKey){
myfunction();
}
});

Redirect webpage on key event

What I want to do is, configure a keyboard key, and then, when I click it, will redirect to another webpage.
Can someone tell me what is wrong with my code or if there's another way to do this?
function redirectpagina () {
window.location="Pagina KITT Parque.html"
}
window.addEventListener("keyup", function(e){ if(e.keyCode == 8) redirectpagina (); }, false);
keyCode only works with printable keys. For the others (including backspace), you have to use which.
window.addEventListener("keyup", function(e){ if(e.which == 8) redirectpagina (); }, false);
This is a complete working page (at least on my browser).
<html>
<body>
<h3>type G for Google</h3>
<script>
function redirectpagina () {
window.location="http://www.google.com"
}
window.addEventListener(
"keyup",
function(e){
if (e.keyCode > 13)
window.alert(e.keyCode);
if(e.keyCode == 71)
redirectpagina ();
});
</script>

Jquery KeyPress Doesn't work

Any idea why this doesn't work whatsoever on any browser?
If i try it in jsfiddle it works.
$('#input_area').keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
HTML
<script type="text/javascript" src="counts.js"></script>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
<input type="text" id="input_area"/>
</body>
JS
$(document).ready(function() {
$('#input_area').keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
});
I am ready to bet 5 bucks that you didn't wrap it in a document.ready handler in your actual application which jsfiddle does by default:
$(function() {
$('#input_area').keypress(function(e) {
if(e.which == 13) {
alert('You pressed enter!');
}
});
});
Another possibility is you forgot to reference jQuery or you referenced it from a wrong url.
Depending on the browser, the which property might not be implemented. You should also check for keyCode:
$(document).ready(function() {
$("#input_area").keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
alert('You pressed enter!');
}
});
});
If it works when running in jsfiddle, then it works. I suspect you're trying to register the keypress listener when the dom is not loaded yet, and input_area is not available yet. Wrap it inside $(document).ready :
$(document).ready(function() {
$('#input_area').keypress(function(e) {
if (e.which == 13) {
alert('You pressed enter!');
}
});
});
Try to use binding,
$('#input_area').bind('keypress', function(e){
alert(e.which);
});

Categories

Resources