I need to detect arrow key input in javascript. Currently I am doing this:
document.onkeydown = function(event) {
if (event.which == 37) {
...
} else if (event.which == 39) {
...
} else if (event.which == 38) {
...
} else if (event.which == 40) {
...
}
};
document.onkeyup = function(event) {
if (event.which == 37) {
...
} else if (event.which == 39) {
...
} else if (event.which == 38) {
...
} else if (event.which == 40) {
...
}
};
This works fine, but when i press command + right and release the arrow key first, I get the down event for the arrow key, but only get an up event when releasing the command key. Also the keycode is 91 regardless of which arrow key I was pressing. How do I handle this situation?
I am on a mac with google chrome.
Related
This is what I tried and obviously failed:
ed.on('keyup', function(e){
console.log(e.keyCode)
if(e.keyCode == 13 && !e.shiftKey){
e.shiftKey = true;
e.keyCode = 13;
$(this).trigger(e);
}
else if (e.keyCode == 13 && e.shiftKey){
e.shiftKey = false;
e.keyCode = 13;
$(this).trigger(e);
}
});
Is there a way to do this cause based on what I seen I think I'm on the right track and most likely just not triggering it early or something similar.
Additionally, I tried using 'keypress' instead and had no luck with that.
document.onkeydown = function onkeydown(e) {
if (e.keyCode == 13 && e.shiftKey==false) {
e.preventDefault();
document.execCommand("insertLineBreak");
}
}
When enter is pressed without shift, trigger keydown with enter and shift!
$('input').on('keydown', function(event) {
if (event.keyCode == 13 && !event.shiftKey) {
$(this).trigger(jQuery.Event("keydown", {
keyCode: 13, // ENTER
shiftKey: true
}));
} else if (event.keyCode == 13 && event.shiftKey) {
console.log('shift + enter');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input/>
i have used this code but it only detects if the capslock is on or off.
$(function () {
var isShiftPressed = false;
var isCapsOn = null;
$("#txtName").bind("keydown", function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 16) {
isShiftPressed = true;
}
});
$("#txtName").bind("keyup", function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode == 16) {
isShiftPressed = false;
}
if (keyCode == 20) {
if (isCapsOn == true) {
isCapsOn = false;
$("#error").hide();
} else if (isCapsOn == false) {
isCapsOn = true;
$("#error").show();
}
}
});
$("#txtName").bind("keypress", function (e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
isCapsOn = true;
$("#error").show();
} else {
$("#error").hide();
}
});
});
but this is not functioning if the textarea that hold the value is in readOnly state.
how can i fix it?
replace
$("#txtName")
with
$('body')
You could use onkeypress instead of onkeydown. The latter only detects which key was pressed; the former (even though counter-intuitively its name includes 'keypress') will give you the char. This link explains in detail: http://unixpapa.com/js/key.html Note that onkeypress is not supported by all browsers.
Also, your code for converting charcode to char is inefficient, and you're converting uppercase charcodes to lowercase chars. Here's some code that listens for key presses and on each one, alerts the user which char was pressed.
document.onkeypress = function(event){
event = event || window.event;
var key = event.keyCode;
alert(String.fromCharCode(key));
}
if (event.keyCode == "65"){
document.getElementById("txtInput").value+=val1;
btnA.style.backgroundColor="#00bfff";
}
if (event.keyCode == "66"){
document.getElementById("txtInput").value+="b";
btnB.style.backgroundColor="#00bfff";
}
if (event.keyCode == "67"){
document.getElementById("txtInput").value+="c";
btnC.style.backgroundColor="#00bfff";
}
if (event.keyCode == "68"){
document.getElementById("txtInput").value+="d";
btnD.style.backgroundColor="#00bfff";
}
if (event.keyCode == "69"){
document.getElementById("txtInput").value+="e";
btnE.style.backgroundColor="#00bfff";
}
if (event.keyCode == "70"){
document.getElementById("txtInput").value+="f";
btnF.style.backgroundColor="#00bfff";
}
if (event.keyCode == "71"){
document.getElementById("txtInput").value+="g";
btnG.style.backgroundColor="#00bfff";
}
if (event.keyCode == "72"){
document.getElementById("txtInput").value+="h";
btnH.style.backgroundColor="#00bfff";
}
if (event.keyCode == "73"){
document.getElementById("txtInput").value+="i";
btnI.style.backgroundColor="#00bfff";
}
if (event.keyCode == "74"){
document.getElementById("txtInput").value+="j";
btnJ.style.backgroundColor="#00bfff";
}
if (event.keyCode == "75"){
document.getElementById("txtInput").value+="k";
btnK.style.backgroundColor="#00bfff";
}
if (event.keyCode == "76"){
document.getElementById("txtInput").value+="l";
btnL.style.backgroundColor="#00bfff";
}
if (event.keyCode == "77"){
document.getElementById("txtInput").value+="m";
btnM.style.backgroundColor="#00bfff";
}
if (event.keyCode == "78"){
document.getElementById("txtInput").value+="n";
btnN.style.backgroundColor="#00bfff";
}
if (event.keyCode == "79"){
document.getElementById("txtInput").value+="o";
btnO.style.backgroundColor="#00bfff";
}
if (event.keyCode == "80"){
document.getElementById("txtInput").value+="p";
btnP.style.backgroundColor="#00bfff";
}
if (event.keyCode == "81"){
document.getElementById("txtInput").value+="q";
btnQ.style.backgroundColor="#00bfff";
}
if (event.keyCode == "82"){
document.getElementById("txtInput").value+="r";
btnR.style.backgroundColor="#00bfff";
}
if (event.keyCode == "83"){
document.getElementById("txtInput").value+="s";
btnS.style.backgroundColor="#00bfff";
}
if (event.keyCode == "84"){
document.getElementById("txtInput").value+="t";
btnT.style.backgroundColor="#00bfff";
}
if (event.keyCode == "85"){
document.getElementById("txtInput").value+="u";
btnU.style.backgroundColor="#00bfff";
}
if (event.keyCode == "86"){
document.getElementById("txtInput").value+="v";
btnV.style.backgroundColor="#00bfff";
}
if (event.keyCode == "87"){
document.getElementById("txtInput").value+="w";
btnW.style.backgroundColor="#00bfff";
}
if (event.keyCode == "88"){
document.getElementById("txtInput").value+="x";
btnX.style.backgroundColor="#00bfff";
}
if (event.keyCode == "89"){
document.getElementById("txtInput").value+="y";
btnY.style.backgroundColor="#00bfff";
}
if (event.keyCode == "90"){
document.getElementById("txtInput").value+="z";
btnZ.style.backgroundColor="#00bfff";
}
thats the code i used so when i press a-z in the keyboard it will have a-z in the textarea. But even if the capslock is ON its still on lowercase.
I have two areas on the same page I wish to have arrow keys doing something (two different things).
The problem is, if I have the following code, only once is executed.
$(document).keydown(function (evt) {
if (evt.keyCode == 37) {
evt.preventDefault();
// CODE
} else if (evt.keyCode == 39) {
evt.preventDefault();
// CODE
}
});
$(document).keydown(function (evt) {
if (evt.keyCode == 37) {
evt.preventDefault();
// CODE
} else if (evt.keyCode == 39) {
evt.preventDefault();
// CODE
}
});
How can I have it so two are executed? I can't see how I could use classes, as its the arrow keys, not a click function.
jQuery has a :visible meta selector: http://jsfiddle.net/8rgnzmk5/1/
$(document).keydown(function (evt) {
if (evt.keyCode == 37 || evt.keyCode == 39) {
evt.preventDefault();
if (evt.keyCode == 37) {
if ($target.is(':visible')) {
// left, visible
} else {
// left, invisible
}
} else if (evt.keyCode == 39) {
if ($target.is(':visible')) {
// right, visible
} else {
// right, invisible
}
}
}
});
i want to ask how can i change the web page when the arrow key pushed by user , like a web of manga/book if we want to next page we just push the arrow key
sorry for my english , thanks before
You can use jQuery for that:
$(document).keydown(function(e) {
if (e.which == 37) {
alert("left");
e.preventDefault();
return false;
}
if (e.which == 39) {
alert("right");
e.preventDefault();
return false;
}
});
If you wish to use the jQuery framework, then look at Binding arrow keys in JS/jQuery
In plain javascript, I'll go with :
document.onkeydown = function (e) {
e = e || window.event;
var charCode = (e.charCode) ? e.charCode : e.keyCode;
if (charCode == 37) {
alert('left');
}
else if (charCode == 39) {
alert('right');
}
};
Here is a non jQuery option:
document.onkeydown = arrowChecker;
function arrowChecker(e) {
e = e || window.event;
if (e.keyCode == '37') { //left
document.location.href = "http://stackoverflow.com/";
}
else if (e.keyCode == '39') { //right
document.location.href = "http://google.com/";
}
}
While working with the multiple keypress events i found this code which worke fine
$(document).bind('keypress', function(event) {
if( event.which === 65 && event.shiftKey ) {
alert('you pressed SHIFT+A');
}
});
But to make it to work wth combinig with windows key... like
event.which === 65 && event.windowsKey
it failed...
Is there any option to make it work with windows key?
if it is a mac machine there is no key as windows..so what could be the alternate option for windows key in mac
Use keyup event.
On a Mac left Command is which = 91, right Command is which = 93. I can't tell what are those on Windows, but you can test it yourself. As #ian commented they should be 91 and 92 respectively.
To test
$(document).on('keyup', function(e) {
var modKey = "";
if (e.shiftKey) modKey += "shiftKey,";
if (e.ctrlKey) modKey += "ctrlKey,";
if (e.altKey) modKey += "altKey,";
if (e.metaKey) modKey += "metaKey,";
console.log ("which: " + e.which + " modkey: " + modKey );
});
UPDATE: Try use keydown event and event.metaKey
$(document).on('keydown', function(e) {
if(e.which === 65 && event.metaKey ) {
console.log ("You pressed Windows + A");
}
});
Remember the key you pressed before. Like if you press shift. get a boolean or something to shiftPressed = true on a onKeyRelease make it false again. That way you can check if shiftPressed == true && aPressed == true before doing something
I made something a while ago for a little WASD game. Perhaps it makes more sense if you see the code:
var up = false;
var down = false;
var left = false;
var right = false;
function keyUp(e) {
keyCode = (e.keyCode ? e.keyCode : e.which);
if (keyCode == 37 || keyCode == 65) {
left = false;
}
if (keyCode == 38 || keyCode == 87) {
up = false;
}
if (keyCode == 39 || keyCode == 68) {
right = false;
}
if (keyCode == 40 || keyCode == 83) {
down = false;
}
}
function forceStopMoving() {
left = false;
up = false;
right = false;
down = false;
}
function keyDown(e) {
keyCode = (e.keyCode ? e.keyCode : e.which);
if (keyCode == 37 || keyCode == 65) {
left = true;
}
if (keyCode == 38 || keyCode == 87) {
up = true;
}
if (keyCode == 39 || keyCode == 68) {
right = true;
}
if (keyCode == 40 || keyCode == 83) {
down = true;
}
}