I want to take keyboard input in JavaScript, where arrow keys, when pressed, will result in the change in shape of a particular shape. How do I take the input of any of the keys in JavaScript?
This question is related to
javascript
Use JQuery keydown event.
$(document).keypress(function(){
if(event.which == 70){ //f
console.log("You have payed respect");
}
});
In JS; keyboard keys are identified by Javascript keycodes
If you are doing this in a browser, you can capture keyboard events.
Can all be listened to on HTML nodes in most browsers.
Webkit also supports...
See for more details .. http://unixpapa.com/js/key.html
Since event.keyCode is deprecated, I found the event.key useful in javascript. Below is an example for getting the names of the keyboard keys pressed (using an input element). They are given as a KeyboardEvent key text property:
function setMyKeyDownListener() {_x000D_
window.addEventListener(_x000D_
"keydown",_x000D_
function(event) {MyFunction(event.key)}_x000D_
)_x000D_
}_x000D_
_x000D_
function MyFunction (the_Key) {_x000D_
alert("Key pressed is: "+the_Key);_x000D_
}html { font-size: 4vw; background-color: green; color: white; padding: 1em; }<body onload="setMyKeyDownListener()">_x000D_
<div>_x000D_
<input id="MyInputId">_x000D_
</div>_x000D_
</body>_x000D_
</html>You should register an event handler on the window or any element that you want to observe keystrokes on, and use the standard key values instead of keyCode. This modified code from MDN will respond to keydown when the left, right, up, or down arrow keys are pressed:
window.addEventListener("keydown", function (event) {_x000D_
if (event.defaultPrevented) {_x000D_
return; // Do nothing if the event was already processed_x000D_
}_x000D_
_x000D_
switch (event.key) {_x000D_
case "ArrowDown":_x000D_
// code for "down arrow" key press._x000D_
break;_x000D_
case "ArrowUp":_x000D_
// code for "up arrow" key press._x000D_
break;_x000D_
case "ArrowLeft":_x000D_
// code for "left arrow" key press._x000D_
break;_x000D_
case "ArrowRight":_x000D_
// code for "right arrow" key press._x000D_
break;_x000D_
default:_x000D_
return; // Quit when this doesn't handle the key event._x000D_
}_x000D_
_x000D_
// Cancel the default action to avoid it being handled twice_x000D_
event.preventDefault();_x000D_
}, true);_x000D_
// the last option dispatches the event to the listener first,_x000D_
// then dispatches event to windowSource: Stackoverflow.com