Develop Reference

Javascript disable spacebar scrolling [duplicate]

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.

I want to enable right click on image only

I am using code to block right click on my blog. It's work for may website and disable ctrl+v ctrl+c-right click f12 on my webpage. But I want to enable right click on image. I don't know how to do that. But Please Help me.
var isCtrl = false;
document.onkeyup = function(e) {
if (e.which == 17)
isCtrl = false;
}
document.onkeydown = function(e) {
if (e.which == 123)
isCtrl = true;
if (((e.which == 85) || (e.which == 65) || (e.which == 88) || (e.which == 67) || (e.which == 86) || (e.which == 2) || (e.which == 3) || (e.which == 123) || (e.which == 83)) && isCtrl == true) {
alert('This is Function Disabled');
return false;
}
}
// right click code
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if (navigator.appName == "Netscape")
document.captureEvents(Event.MOUSEDOWN || Event.MOUSEUP);
function mischandler() {
alert('This is Function Disabled');
return false;
}
function mousehandler(e) {
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if ((eventbutton == 2) || (eventbutton == 3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
//select content code disable alok goyal
function killCopy(e) {
return false
}
function reEnable() {
return true
}
document.onselectstart = new Function("return false")
if (window.sidebar) {
document.onmousedown = killCopy
document.onclick = reEnable
}

It's easy using event.target we can enable/disable right-click when mouse enters/leaves a particular image section on your web page.
Just see a demo of the same below
var isCtrl = false;
document.onkeyup = function(e) {
if (e.which == 17)
isCtrl = false;
}
document.onkeydown = function(e) {
if (e.which == 123)
isCtrl = true;
if (((e.which == 85) || (e.which == 65) || (e.which == 88) ||
(e.which == 67) || (e.which == 86) || (e.which == 2) ||
(e.which == 3) || (e.which == 123) || (e.which == 83)) && isCtrl == true) {
alert('This is Function Disabled');
return false;
}
}
// right click code
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if (navigator.appName == "Netscape")
document.captureEvents(Event.MOUSEDOWN || Event.MOUSEUP);
function mischandler(e) {
let target = $(e.target);
if(!target.is('#img')) {
alert('This is Function Disabled');
return false;
}
}
function mousehandler(e) {
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if ((eventbutton == 2) || (eventbutton == 3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
$('#img').on('mouseenter', function(e) {
mischandler(e);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='https://www.w3schools.com/html/pic_mountain.jpg' id='img' alt='mountain.jpg' width='200' height='200'/>
Hope, this works fine to you. :) :)

I have updated code which checks if selected element is image. Using event object we can check the nature of selected element
function mischandler(e) { //change
if(e.currentTarget.getAttribute("src")==null) //change
{
alert('This is Function Disabled');
return false;
}
}
function mousehandler(e) {
var myevent = (isNS) ? e : event;
var eventbutton = (isNS) ? myevent.which : myevent.button;
if (((eventbutton == 2) || (eventbutton == 3)) && e.currentTarget.getAttribute("src")==null) //change
return false;
}

With jQuery I think a rather simple solution would be:
$(document).on( "contextmenu", function(event) {
//if image allow normal browser behaviou
if(event.target.tagName.toLowerCase() === 'img'){
return true;
}else{
//if any other event target prevent default
event.preventDefault;
alert("no right click");
return false;
}
})

background change after alert

Why on this page:
https://jsfiddle.net/eddnhc5f/
When I press the key c on Firefox and Microsoft edge, the background is changed before the alert, but in Opera and Chrome, after I press confirm alert.
function getKeyup(key) {
if (key == null) {
keycode = event.keyCode;
// To Mozilla
} else {
keycode = key.keyCode;
}
}
function TEST() {
document.body.style.backgroundColor = "BLACK";
alert('Hello');
return false;
}
function getKey(key) {
if (key == null) {
keycode = event.keyCode;
// To Mozilla
} else {
keycode = key.keyCode;
}
if (keycode == 67) {
//alert(condcheck);
TEST();
return false;
}
}
$(document).ready(function() {
$(document).keydown(function(eventObj) {
getKey(eventObj);
});
$(document).keyup(function(eventObj) {
getKeyup(eventObj);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
TEST

check out this demo
I did change in TEST() function.
function getKeyup(key){
if ( key == null ) {
keycode = event.keyCode;
// To Mozilla
} else {
keycode = key.keyCode;
}
}
function TEST()
{
//document.body.style.backgroundColor = "BLACK";
alert('Hello');
document.body.style.backgroundColor = "BLACK";
return false;
}
function getKey(key){
if ( key == null ) {
keycode = event.keyCode;
// To Mozilla
} else {
keycode = key.keyCode;
}
if (keycode == 67){
//alert(condcheck);
TEST();
return false;
}
}
$(document).ready( function (){
$(document).keydown(function (eventObj){
getKey(eventObj);
});
$(document).keyup(function (eventObj){
getKeyup(eventObj);
});
});

How to write a good Caps Lock detection solution in JavaScript?

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 :)

JS : Event on ScrollDown and ScrollUp

I currently have a animated sprite that walks when you press the left and right keys on the keyboard. What I would like to do is to make the sprite walk-right when you scroll down and walk left when you scroll up. I would also like to make the sprite stop walking when the user stops scrolling. Thanks in advance!
I tried using the $(window).scroll function with variables of current and lastscroll positions, but it didn't work.
function walk(e) {
var keyCode = e.keyCode;
if (keyCode === 39) {
key.right = true;
} else if (keyCode === 37) {
key.left = true;
}
if (key.right === true) {
trans += 0;
translate();
sprite.classList.remove('left');
sprite.classList.add('right');
sprite.classList.add('walk-right');
} else if (key.left === true) {
trans -= 0;
translate();
sprite.classList.remove('right');
sprite.classList.add('left');
sprite.classList.add('walk-left');
}
}
function stop(e) {
var keyCode = e.keyCode;
if (keyCode === 39) {
key.right = false;
} else if (keyCode === 37) {
key.left = false;
}
if (key.right === false) {
sprite.classList.remove('walk-right');
} if (key.left === false) {
sprite.classList.remove('walk-left');
}
}

Update:
Here's a better version; I merged the keyboard and scroll code into the same event for you:
if (document.addEventListener) {
// IE9, Chrome, Safari, Opera
document.addEventListener("mousewheel", walk, false);
// Firefox
document.addEventListener("DOMMouseScroll", walk, false);
}else{
// IE 6/7/8
document.attachEvent("onmousewheel", walk);
}
function walk(e) {
var e = window.event || e; // old IE support
if (e.keyCode) {
//keyboard input
if (e.keyCode === 39) {
key.right = true;
} else if (keyCode === 37) {
key.left = true;
}
}else{
//scroll input
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
if (delta == 1) {
//walk right
key.right = true;
key.left = false;
}else if (delta == -1) {
//walk left
key.left = true;
key.right = false;
}else{
//stop
key.left = false;
key.right = false;
sprite.classList.remove('walk-right');
sprite.classList.remove('walk-left');
}
}
if (key.right === true) {
trans += 0;
translate();
sprite.classList.remove('left');
sprite.classList.add('right');
sprite.classList.add('walk-right');
} else if (key.left === true) {
trans -= 0;
translate();
sprite.classList.remove('right');
sprite.classList.add('left');
sprite.classList.add('walk-left');
}
}
Previous answer:
Here you go:
if (document.addEventListener) {
// IE9, Chrome, Safari, Opera
document.addEventListener("mousewheel", scroll, false);
// Firefox
document.addEventListener("DOMMouseScroll", scroll, false);
}else{
// IE 6/7/8
document.attachEvent("onmousewheel", scroll);
}
function scroll(e) {
var e = window.event || e; // old IE support
var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
if (delta == 1) {
//walk right
key.right = true;
key.left = false;
}else if (delta == -1) {
//walk left
key.left = true;
key.right = false;
}else{
//stop
key.left = false;
key.right = false;
sprite.classList.remove('walk-right');
sprite.classList.remove('walk-left');
}
if (key.right === true) {
trans += 0;
translate();
sprite.classList.remove('left');
sprite.classList.add('right');
sprite.classList.add('walk-right');
} else if (key.left === true) {
trans -= 0;
translate();
sprite.classList.remove('right');
sprite.classList.add('left');
sprite.classList.add('walk-left');
}
}

Use document.addEventListener instead:
var currentY = 0;
document.addEventListener('scroll', function(e){
// some logic
key.right = false;
key.left = false;
currentY < window.pageYOffset ? key.right = true : key.left = true;
currentY = window.pageYOffset;
})