So my problem is this,
I was wondering if there was a way to detect if a user right clicks and left clicks simultaneously and commit an action if doing so in jQuery. It seems like the code can only detect one right click or one left click at a time in mouse events.
UPDATE
Thanks for the answers, I decided ultimately that feature would be too funky to have for users when I was trying to implement it. Hopefully these answers will be able to help other people too.
You can create variables to hold the state of each mouse button individually and use that to determine whether both buttons are down:
window.isLeftMouseDown = false;
window.isRightMouseDown = false;
$(document).on('mousedown', function(e) {
if (e.which == 1)
window.isLeftMouseDown = true;
else if (e.which == 3)
window.isRightMouseDown = true;
if (window.isLeftMouseDown && window.isRightMouseDown) {
console.log('both down');
}
});
$(document).on('mouseup', function(e) {
if (e.which == 1)
window.isLeftMouseDown = false;
else if (e.which == 3)
window.isRightMouseDown = false;
});
https://jsfiddle.net/2j151tpt/
Something like this. It uses ES2015.
let left = false;
document.addEventListener('mousedown', e => {
if (e.button === 0) {
left = true;
} else if (e.button === 2 && left) {
fireYourFunctionForTwoButtons();
}
})
document.addEventListener('mouseup', e => {
if (e.button === 0) {
left = false;
}
});
My proposal is based on the elapsed time in milliseconds between the two consecutive clicks:
$(function () {
$('#btn').data('last-left-click', 0).on('mousedown contextmenu', function (e) {
var nowTime = Date.now();
if (e.which == 1) {
$(this).data('last-left-click', nowTime);
}
if (e.which == 3) {
// if less then 300 milliseconds....
if ((nowTime - $(this).data('last-left-click')) < 300) {
console.log('Both left and right clicked in sequence in less then 300 milliseconds!');
}
$(this).data('last-left-click', 0);
}
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<button id="btn">Click Me</button>
Related
As the title says - I'm looking to add some auto-scrolling on a specific webpage but the script that I have at the moment stops it completely from scrolling, which doesn't look visually appealing during presentations IMHO.
Is there a possibility to slow down instead of harshly stopping the auto-scrolling of the webpage on a specific keystroke?
This is the JS that I tried.
let scrollerID;
let paused = true;
let speed = 2; // 1 - Fast | 2 - Medium | 3 - Slow
let interval = speed * 5;
function startScroll(){
let id = setInterval(function() {
window.scrollBy(0, 2);
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
// Reached end of page
stopScroll();
}
}, interval);
return id;
}
function stopScroll() {
clearInterval(scrollerID);
}
document.body.addEventListener('keypress', function (event)
{
if (event.which == 13 || event.keyCode == 13) {
// It's the 'Enter' key
if(paused == true) {
scrollerID = startScroll();
paused = false;
}
else {
stopScroll();
paused = true;
}
}
}, true);
Thanks in advance!
I tried with this code to detect two keyboard arrows being simultaneously pressed:
document.addEventListener('keydown', event => {
if (event.keyCode === 38) {
console.log('up Arrow')
}
if (event.keyCode === 39) {
console.log('right Arrow')
}
})
But it doesn't work, however hard I try to press them at exactly the same time.
How can I cleanly fix this and detect when both keys are down ?
There's only one keyCode per event. You have to track the keys going down, and up:
// if you keep both up and down keys down, you'll get a message
let downKeys = {}; // the set of keys currently down
document.addEventListener('keydown', event => {
downKeys[event.keyCode] = true;
if (downKeys[38] && downKeys[40]) {
console.log("both down!");
}
});
document.addEventListener('keyup', event => {
downKeys[event.keyCode] = false;
});
(you have to go full page to test this snippet)
Here I use 2 flags to check if you are holding the keys.
If both flags are true then it means that you are holding both keys. So, you can perform anything inside the condition.
let holdKeyUp = false;
let holdKeyRight = false;
document.addEventListener('keydown', event => {
if (event.keyCode === 38) {
holdKeyUp = true;
}
if (event.keyCode === 39) {
holdKeyRight = true;
}
if (holdKeyUp && holdKeyRight) {
console.log("Both keys are pressed.");
}
})
document.addEventListener('keyup', event => {
if (event.keyCode === 38) {
holdKeyUp = false;
}
if (event.keyCode === 39) {
holdKeyRight = false;
}
})
I'm currently building a music player with three buttons (actually simple divs) for Play/Pause (id="play"), Previous (id=rew) and Next (id="fwd").
I want the Play/Pause to be "clicked" when pressing SPACEBAR.
I want the Previous to be "clicked" when pressing LEFT ARROW.
I want the Next to be "clicked" when pressing RIGHT ARROW.
I've successfully managed the SPACEBAR control of Play with this :
var play = document.getElementById("play");
document.onkeydown = function (e) {
if (e.keyCode == 32) {
play.click();
}
};
However, when I add the same for the two other buttons in my script, the SPACEBAR control of Play does not work anymore, as well as the other two.
So, what I have currently in my script and which is obviously not working is this :
<script>
var play = document.getElementById("play");
document.onkeydown = function (e) {
if (e.keyCode == 32) {
play.click();
}
};
var rew = document.getElementById("rew");
document.onkeydown = function (e) {
if (e.keyCode == 37) {
rew.click();
}
};
var fwd = document.getElementById("fwd");
document.onkeydown = function (e) {
if (e.keyCode == 39) {
fwd.click();
}
};
</script>
What am I doing wrong ?
Each of your keydown events is overwriting the previous one.
Instead, put all the logic into one keydown event, like this:
var play = document.getElementById("play");
var rew = document.getElementById("rew");
var fwd = document.getElementById("fwd");
document.onkeydown = function(e) {
if (e.keyCode == 32) {
play.click();
} else if (e.keyCode == 37) {
rew.click();
} else if (e.keyCode == 39) {
fwd.click();
}
};
When you assign to onkeydown several times only the last one will be assigned because it will override the previous one. You can use addEventListener instead but that isn't the best approach neither. Just make more test inside one event listener like this:
var play = document.getElementById("play");
var rew = document.getElementById("rew");
var fwd = document.getElementById("fwd");
document.onkeydown = function (e) {
if (e.keyCode == 32) {
play.click();
}
else if(e.keyCode == 32) {
rev.click();
}
else if(e.keyCode == 32) {
fwd.click();
}
};
I have a dashboard page that has a left pane which slides on click. I want to make the same thing happen on pressing the Left Arrow and the Right Arrow keys.
Can anybody help me on this? I could do it on click. Below is my solution:
$(document).ready(function() {
$('#opener, .left-panel-head').on('click', function() {
var panel = $('#LeftPanel');
if (panel.hasClass("visible")) {
panel.removeClass('visible').animate({'margin-left': '-300px'});
$('#rightPanel').animate({'width': '100%'});
} else {
panel.addClass('visible').animate({'margin-left': '0px'});
$('#rightPanel').animate({'width': '74%'});
}
return false;
});
});
function updatePanel(direction) {
if(direction === 'left') {
// pressing left
}else if(direction === 'right') {
// pressing right
}
};
$(document).keypress(function( event ) {
if(event.which == 37) {
updatePanel('left');
}else if(event.which == 39) {
updatePanel('right');
}
};
$('#opener, .left-panel-head').on('click', updatePanel('left'));
$('#opener, .right-panel-head').on('click', updatePanel('right'));
You can make your function an actual function instead of an anon function passed into your click event and then call it from multiple places.
(function($, document){
var $document = $(document);
//shared function
function stuff(){
}
//check if key pressed was one of the left or right arrows
function checkKey(e){
var c = e.which ? e.which : e.keyCode;
//left arrow, right arrow
if(c === 37 || c === 39){
//call stuff if left or right arrow was pressed
stuff();
}
}
//call stuff on click
$('#opener, .left-panel-head').on('click', stuff);
$document.on('keydown', checkKey);
})(jQuery, document);
I want to enter only 3 words in a textbox. My JavaScript code is below:
jQuery('#Txt_Report').keyup(function (event) {
if (event.which == 32) {
count = jQuery('#Txt_Report').val().split(' ').length;
if (count > 2) {
/////////////
//How can I stop entering text in txt_report anymore?
/////////////
});
}
}
As you see, I want to block user to not to enter more than 3 words. If someone knows how to handle this please help.
You can't preventDefault using keyup. Using keydown or keypress should work. Here is the example:
$('#Txt_Report').keypress(function(e) {
if (e.which == 32) {
var count = this.value.split(' ').length;
if (count > 2) {
e.preventDefault();
}
}
});
Use event.preventDefault(); with keydown (as suggested by the comments)
Demo: http://jsfiddle.net/wTvmz/
jQuery('#Txt_Report').keydown(function (event) {
if (event.which == 32) {
count = jQuery('#Txt_Report').val().split(' ').length;
if (count > 2) {
event.preventDefault();
}
}
});
Set the disabled attribute to disabled.
jQuery('#Txt_Report').keyup(function (event) {
if (event.which == 32) {
count = jQuery('#Txt_Report').val().split(' ').length;
if (count > 2) {
/////////////
//How can I stop entering text in txt_report anymore?
/////////////
jQuery('#Txt_Report').attr('disabled', 'disabled');
});
}
}
Ref: http://www.w3schools.com/tags/att_input_disabled.asp
Why not utilize "keypress" and return false?
http://jsfiddle.net/kW9tF/
$('#txt').keypress(function (event) {
return false;
});
Updated code example: http://jsfiddle.net/kW9tF/1/
$('#txt').keypress(function (event) {
var count = $(this).val().split(' ').length;
if (count > 2) {
return false;
};
});