This question already has answers here:
Pressing spacebar scrolls page down?
(3 answers)
Closed 2 years ago.
I am working on a WebGL application and I use the spacebar for movement of the camera. The problem is, when I press the spacebar the website also scrolls down. Is there a way to disable this feature?
None of the answers so far works reliably. They work for about a second, then the site scrolls down for a tiny amount of time and then the cycle repeats.
This is my code for the keypresses:
window.addEventListener("keydown", (e) => {
if(e.repeat) { return; }
if(e.which == 27 || e.which == 9) {
document.exitPointerLock();
checkMouse = false;
}
if(checkMouse) {
if(e.which == 87) { forwardPressed = true; }
if(e.which == 83) { backwardPressed = true; }
if(e.which == 65) { leftPressed = true; }
if(e.which == 68) { rightPressed = true; }
if(e.which == 32) { upPressed = true; event.stopPropagation(); event.preventDefault(); }
if(e.which == 16) { downPressed = true; }
}
});
As you can see, for the space key there already is one solution implemented but both types of answers I have gotten so far don't work.
You can do it something like this
$(document).keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '32') {
event.preventDefault();
}
});
Add this to your javascript:
let checkMouse = true
window.addEventListener("keydown", (e) => {
if(e.repeat) {
return;
}
if(e.which == 27 || e.which == 9) {
document.exitPointerLock();
checkMouse = false;
}
if(checkMouse) {
if(e.which == 87) { forwardPressed = true; }
if(e.which == 83) { backwardPressed = true; }
if(e.which == 65) { leftPressed = true; }
if(e.which == 68) { rightPressed = true; }
if(e.which == 32) { upPressed = true; event.stopPropagation(); event.preventDefault(); }
if(e.which == 16) { downPressed = true; }
}
if (e.which == 32) {
return !(e.keyCode == 32);
}
});
checkMouse wasn't initialised before. It's working fine here.
Related
I'm making a game that includes gravity and I need to make it so when you hit a wall or something than you can't move. I was thinking something along the lines of just stopping the forward movement but then you can just turn around and go into it backwards. No such luck so far.
Here's my movement code:
document.onkeydown = function(e) {
// e.preventDefault()
if(e.keyCode == 87) {
player.movement.w = true
}
if(e.keyCode == 65) {
player.movement.a = true
}
if(e.keyCode == 83) {
player.movement.s = true
}
if(e.keyCode == 68) {
player.movement.d = true
}
if(e.keyCode == 69) {
player.movement.e = true
}
if(e.keyCode == 81) {
player.movement.q = true
}
}
document.onkeyup = function(e) {
if(e.keyCode == 87) {
player.movement.w = false
}
if(e.keyCode == 65) {
player.movement.a = false
}
if(e.keyCode == 83) {
player.movement.s = false
}
if(e.keyCode == 68) {
player.movement.d = false
}
if(e.keyCode == 69) {
player.movement.e = false
}
if(e.keyCode == 81) {
player.movement.q = false
}
}
function loop() {
requestAnimationFrame(loop)
if(player.look.locked == true) {
if(player.movement.w == true) {
playerObj.translateZ(player.movement.speed / 100)
}
if(player.movement.a == true) {
playerObj.translateX(player.movement.speed / 100)
}
if(player.movement.s == true) {
playerObj.translateZ(player.movement.speed / 100 * -1)
}
if(player.movement.d == true) {
playerObj.translateX(player.movement.speed / 100 * -1)
}
if(player.movement.e == true) {
playerObj.translateY(player.movement.speed / 100 * -1)
}
if(player.movement.q == true) {
playerObj.translateY(player.movement.speed / 50)
}
}
}
loop()
(I know event.keyCode is depreciated)
I currently use the code below to navigate to the next and previous pages by allowing the user to use the left and right buttons. How would I integrate the code for swiping on the mobile phone for navigation?
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer") {
document.onkeydown=keydownie;
} else {
document.onkeydown=keydown;
}
function keydownie(e) {
if (!e) var e = window.event;
if (e.keyCode) {
keycode = e.keyCode;
if ((keycode == 39) || (keycode == 37)) {
window.event.keyCode = 0;
}
} else {
keycode = e.which;
}
if (keycode == 37) {
img = document.querySelector("img[src='http://www.example.com/arrowleft.jpg'],img[src='http://www.example.com/images/left.png']");
window.location = img.parentElement.href;
return false;
} else if (keycode == 39) {
img = document.querySelector("img[src='http://www.example.com/arrowright.jpg'],img[src='http://www.example.com/images/right.png']");
window.location = img.parentElement.href;
return false;
}
}
function keydown(e) {
if (e.which) {
keycode = e.which;
} else {
keycode = e.keyCode;
}
if (keycode == 37) {
img = document.querySelector("img[src='http://www.example.com/arrowleft.jpg'],img[src='http://www.example.com/images/left.png']");
window.location = img.parentElement.href;
return false;
} else if (keycode == 39) {
img = document.querySelector("img[src='http://www.example.com/arrowright.jpg'],img[src='http://www.example.com/images/right.png']");
window.location = img.parentElement.href;
return false;
}
}
Found this Caps Lock detection solution. Fiddle here: https://jsfiddle.net/07ugkacn/11/ (Thank you Armfoot). JS/jQuery code here:
$(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();
}
});
});
Works perfectly for my needs. I'm trying to rewrite it in JavaScript though, with no jQuery. How do I rewrite the bind methods without the jQuery? I've tried storing the input fields in a variable and writing
passwordInput.onkeyup = function(e) { ... }
... For example. But to no avail. Think this is what's stopping this solution from working.
Help pls thx.
EDIT: Figured it out on my own
For whom it may concern, a solution for caps detection in vanilla JavaScript. The problem with most of the solutions floating around on the internet is they only show/hide an alert/popup when the user starts typing in the input field. This is not optimal because the "Caps Lock is on" notification is still visible after the user has turned Caps Lock off, and remains so until they resume typing. This is long and unwieldy, and I still don't quite understand it myself. But I recommend it all the same.
function capsDetect() {
var body = document.getElementsByTagName('body')[0];
var isShiftPressed = false;
var isCapsOn = null;
var capsWarning = document.getElementById('caps-lock-warning');
body.addEventListener('keydown', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode = 16){
isShiftPressed = true;
}
});
body.addEventListener('keyup', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if(keyCode == 16) {
isShiftPressed = false;
}
if(keyCode == 20) {
if(isCapsOn == true) {
isCapsOn = false;
capsWarning.style.visibility = 'hidden';
} else if (isCapsOn == false) {
isCapsOn = true;
capsWarning.style.visibility = 'visible';
}
}
});
body.addEventListener('keypress', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if(keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
isCapsOn = true;
capsWarning.style.visibility = 'visible';
} else {
capsWarning.style.visibility = 'hidden';
}
});
}
shiftCaps();
Gaweyne, nicely done! I tested your pure JS code and there are some things that I modified which you may find interesting:
ignored control characters while typing (<= 40), such as directional and removal keys;
replaced if (keyCode = 16){ to if (keyCode === 16){ and other == in the same way;
used display property instead of visibility (CSS);
considered isCapsOn as a boolean, always;
called capsDetected instead of shiftCaps.
You can run the snippet below to check it out:
function capsDetect() {
var body = document.getElementsByTagName('body')[0];
var isShiftPressed = false;
var isCapsOn = false;
var capsWarning = document.getElementById('error');
body.addEventListener('keydown', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode === 16) {
isShiftPressed = true;
}
});
body.addEventListener('keyup', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode === 16) {
isShiftPressed = false;
}
if (keyCode === 20) {
if (isCapsOn) {
isCapsOn = false;
capsWarning.style.display = 'none';
} else {
isCapsOn = true;
capsWarning.style.display = 'inline-block';
}
}
});
body.addEventListener('keypress', function(e) {
var keyCode = e.keyCode ? e.keyCode : e.which;
if (keyCode <= 40)
return;
if (keyCode >= 65 && keyCode <= 90 && !isShiftPressed) {
isCapsOn = true;
capsWarning.style.display = 'inline-block';
} else {
capsWarning.style.display = 'none';
}
});
}
capsDetect();
body {
font-family: Arial;
font-size: 10pt;
}
#error {
border: 1px solid #FFFF66;
background-color: #FFFFCC;
display: inline-block;
margin-left: 10px;
padding: 3px;
display: none;
}
<form action="">
<input id="txtName" type="text" /><span id="error">Caps Lock is ON.</span>
</form>
Maybe some more tweaking will make it perfect... There is still the CAPS LOCK detection on page load: maybe by simulating user input in the background will let us know, but right now I haven't completely figured it out yet.
Btw, I never thought of doing this before, but it is clear that it helps users, specially in passwords fields. In fact, I may personally use it! So I really appreciate your time for posting this up :)
I am trying to prevent scrolling when I use arrow keys in my HTML5 game. It is a maze game that you control with arrow keys or buttons on the screen, but whenever I press the 'up' or 'down' keys, it always scrolls.I am using:
document.addEventListener('keydown', function(e){
if(e.keyCode === 40) {
down();
} else if(e.keyCode === 38) {
up();
} else if(e.keyCode === 37) {
leftclick();
} else if(e.keyCode === 39) {
rightclick();
}
})
Is this possible with javascript? I want it to be able to scroll with my mouse, but not when I use arrow keys on my keyboard. My game is at http://thomaswd.com/maze. Please help. Thanks!
Use e.preventDefault() to prevent the normal key action from taking place.
document.addEventListener('keydown', function(e){
if(e.keyCode === 40) {
down();
e.preventDefault();
} else if(e.keyCode === 38) {
up();
e.preventDefault();
} else if(e.keyCode === 37) {
leftclick();
e.preventDefault();
} else if(e.keyCode === 39) {
rightclick();
e.preventDefault();
}
})
Try this:
document.addEventListener('keydown', function(e) {
if(e.keyCode > 36 && e.keyCode < 41) {
e.preventDefault();
}
if (e.keyCode === 40) {
down();
} else if (e.keyCode === 38) {
up();
} else if (e.keyCode === 37) {
leftclick();
} else if (e.keyCode === 39) {
rightclick();
}
return false;
}, false);
}
Try to add e.preventDefault(); at the end
Is there any way to trap ctrl+n key in chrome (by using javascript, jquery or any plugin)? I need to assign ctrl+n+enter key to particular task, but as soon as I press ctrl+n, chrome opens a new window. I am able to trap ctrl+n in firefox by using:
event.preventDefault()
but its not working in chrome.
This may work for your issue.
// defining flags
var isCtrl = false;
var isShift = false;
$(document).ready(function () {
// action on key up
$(document).keyup(function (e) {
if (e.which == 17) {
isCtrl = false;
}
if (e.which == 16) {
isShift = false;
}
});
$(document).keydown(function (e) {
if (e.which == 17) {
isCtrl = true;
}
if (e.which == 16) {
isShift = true;
}
if ((e.which == 110 || e.which == 78) && isCtrl) {
e.preventDefault(true);
}
});