I have a handleBackspace function that does something if backspace is being pressed.
I tried this:
const handleBackspace = (e) => {
if(e.keyCode === 8) {
console.log('1')
}
}
//
<input onKeyPress={handleBackspace}>
But that doesn't work. (I tried it with keyCode 13 [enter] and it worked. But keyCode 8 [backspace] doesn't work) Can someone show me a solution?
As can be read here, onKeyPress only receives charCode instead of keyCode.
This gives us three possible answers to this issue:
Either change the event to onKeyDown
Change the listener to check e.charCode
Use e.which, which will work for both onKeyPress and onKeyDown.
onKeyDown detects keyCode events.
Try changing it to onKeyDown event.
Sandbox: https://codesandbox.io/s/react-basic-class-component-kzv2k?file=/src/index.js
handleBackspace = e => {
if (e.keyCode === 8) {
console.log("1");
}
};
render() {
return <input onKeyDown={this.handleBackspace} />;
}
Related
I would like to detect when the user clicks the tab key on their keyboard, using Javascript.
I've tried this:
document.onkeypress = (e) => {
console.log(e);
}
And there it logges keys like letters, numbers and charcters, but not tab, ecs, backspace, enter or other keys like those.
Is there any way of doing so?
Edit: btw, I can only use pure Javascript for this project, no libraries like jQuery etc.
The comment on your question, gives you jQuery solution that will not work.
You need to do it this way with vanilla JS. keyCode is property on event object, that stores the pressed keyboard button.
Here, you have all keycodes that you can use
https://css-tricks.com/snippets/javascript/javascript-keycodes/
document.onkeydown = (e) => {
if(e.keyCode === 9) {
console.log(e);
}
}
Try this
document.addEventListener("keydown", function(event) {
console.log(event.which);
})
https://css-tricks.com/snippets/javascript/javascript-keycodes/
You can use keydown instead.
document.onkeydown = function(e){
document.body.textContent = e.keyCode;
if(e.keyCode === 9){
document.body.textContent += ' Tab pressed';
}
}
Tabkey is an event code. You can catch that event and use e.keyCode ===9 to get the Tab. I think it will still go to the next element in the tabIndex so you will need to preventDefault as well.
I took a couple of things from the different answers on my post, and I got it to work.
document.onkeydown = (e) => {
if(e.key === 'Tab') {
console.log(e.key);
}
}
I am trying to trigger space key with keycode in JavaScript. I will be sending voice command with space and it should trigger a space event with a keycode.
This is what I have done so far
if(firstword =="space"){
const ev = {
type: 'space',
keyCode: 32
}
editor.triggerOnKeyDown(ev);
The code works perfectly if I use enter or other keycode but not working for space, any idea?
You can try like this:
const ev = new KeyboardEvent('keydown',{'keyCode':32,'which':32});
Reference: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/KeyboardEvent
Ty to create addEventListener for space
window.addEventListener('keypress', function (e) {
if (e.keyCode == 32) {
alert('Space pressed');
}
}, false);
I want to run a method whenever the ESC button gets clicked. In the onkeypress Event documentation I read that i will have to use keydown
Note: The onkeypress event is not fired for all keys (e.g. ALT, CTRL, SHIFT, ESC) in all browsers. To detect only whether the user has pressed a key, use the onkeydown event instead, because it works for all keys.
I managed to write a working example:
document.onkeydown = function (e) {
if (document.getElementById("fullscreen") !== null) {
var key = e.which || e.keyCode;
if (key === 27) {
alert(1);
}
}
}
<div id="fullscreen">test</div>
The event listeners in our project have a different pattern, so I tried rewrite it in the same pattern but the code isn't reacting on the key press.
document.getElementById("fullscreen").addEventListener("keydown",
function (e) {
var key = e.which || e.keyCode;
if (key === 27) {
alert(1);
}
});
<div id="fullscreen">test</div>
Why isn't the second code snippet reacting on the key press like the first snippet?
I using a keypress event for enter and tab. But for some reason the code only runs with enter. By pressing tab it just does the default tab action and ignores the code. Please help.
onEnterAddWord: function(ev) {
var kc = ev.which || ev.keyCode;
if (kc === 13 || kc === 9) {
ev.preventDefault();
this.$el.find('.add-word-input input').trigger('blur');
this.$el.find('.viewbox').trigger('click');
console.log('check');
}
},
Try keydown instead of keypress
Modifier and non-printing keys does not fire the keypress event.
How about adding ev.stopImmediatePropagation(); which will prevent other eventListeners to fire?
Which Javascript event is fired when someone presses the "return" key on an iPad in Safari while an input is selected.
I'm using an input element, but not surrounding it in <form> tags. I submit the $('#input').value() when $('#button').click() occurs. However, I'd like to also like to be able to submit when someone presses "return" on the iPad keyboard.
I was overzealous, here is the answer:
jQuery Event Keypress: Which key was pressed?
You can detect the enter key event in safari on ipad with following way :
<body onkeyup="yourFunction(event)">
then in javaScript
function yourFunction(event) {
var e;
if(event) {
e = event;
} else {
e = window.event;
}
if(e.which){
var keycode = e.which;
} else {
var keycode = e.keyCode;
}
if(keycode == 13) {
alert("do your stuff");
}
};
What about using a <form> tag and binding your handler to the submit tag.
$("#myForm").submit(function (event) {
doStuff();
});
It's cleaner and simpler.