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.

Keybinding a button that triggers its onclick function

I would like the left and right arrow keys to trigger the back and next button clicks in my Javascript. I feel like I'm not quite implementing it correctly since my buttons work but the keystrokes do not.
function init() {
flashmovie = document.getElementById('flashmovie');
document.getElementById('back').onclick = function () {
if (c == 0) {
c = paths.length;
}
c--
displayFiles();
}
document.getElementById('next').onclick = function () {
if (c == paths.length - 1) {
c = -1;
}
c++;
displayFiles();
}
document.keypress(function (e) {
if (e.which == 37) {
$("#back").click();
}
});
document.keypress(function (e) {
if (e.which == 39) {
$("#next").click();
}
});
}

You probably want the keydown event.
function init() {
document.getElementById('back').onclick = function() {
console.log('back!');
}
document.getElementById('next').onclick = function() {
console.log('next!');
}
document.addEventListener('keydown', function(e) {
if (e.which == 37) {
$("#back").click();
}
});
document.addEventListener('keydown', function(e) {
if (e.which === 39) {
$("#next").click();
}
});
}
init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="back">Back</button>
<button id="next">Next</button>
I guessed which event listener style you'd want (native DOM versus jQuery) because you've got a mix, but this should get you pointed in the right direction.
From experience, if you have more than a very simple use case for handling keypresses, I'd recommend utilizing a library, like Keypress.

Without jquery, try this
document.onkeyup = function(e){
if (e.which == 37) {
$('#back').click();
} else if (e.which == 39) {
$('#next').click();
}
}
With jquery,
$(document).keypress(function(e){
if (e.which == 37) {
$('#back').click();
} else if (e.which == 39) {
$('#next').click();
}
});

How can I prevent jQuery smartWizard from moving to the next step on enter press?

I have tried this code but it is not working.
var wizardForm = $('#form');
wizardForm.on('keyup keypress', function(e) {
var code = e.keyCode || e.which;
if (code == 13) {
e.preventDefault();
return false;
}
});

This article solved my queestion:
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});

Jquery Tab panel to get focus on key press

I have a jquery tab panel. This panel contains some user controls like textboxes. My requirement is to set focus on tab when I press Shift+T. This is not happening. I have used the following code.
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").keypress(function () {
if (e.keyCode == 80 && e.keyCode == 18)
$("#tabs").focus();
});
$("#tabs").focus(function () {
if (e.keyCode == 37) {
selected = (selected - 1);
$('#tabs').tabs('option', 'selected');
}
if (e.keyCode == 39) {
selected = (selected + 1);
$('#tabs').tabs('option', 'selected');
}
});
});
</script>

I am not sure why you need to complicate it.
Try this demo:
http://jsfiddle.net/lotusgodkk/GCu2D/417/
JS:
$(document).ready(function () {
$(document).on('keydown', function (e) {
var keyCode = e.keyCode;
if ((keyCode == 84) & (e.shiftKey)) {
$('.ui-state-active:visible:first').focus(); //ui-state-active is the class of active tab.
}
});
$('#tabs').tabs();
});

you should try this:
inputs = $("table :input");
$(inputs).keypress(function(e){
if (e.keyCode == 13){
inputs[inputs.index(this)+1].focus();
}
});

i guess might be work for u Click Here
js
$("#status").keydown(function (e) {
if (e.which == 9) {
$("#statuses").html(this.value);
this.value = "";
$("#status").focus();
e.preventDefault();
}
});

first -> remove double qoutes .. they are used for components like input, p etc.
second -> try this code..
$(document).ready(function () {
$('#tabs').keypress(function () {
if (e.keyCode == 80 && e.keyCode == 18)
$('#tabs').focus(); // setting the focus
alert("working"); //test it
});
$('#tabs').focus(function () {
if (e.keyCode == 37) {
selected = (selected - 1);
$('#tabs').focus(); // setting the focus
$('#tabs').tabs('option', 'selected');
}
if (e.keyCode == 39) {
selected = (selected + 1);
$('#tabs').tabs('option', 'selected');
}
});
});
</script>

Trapping ctrl+n key combination in chrome

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);
}
});