We Keep Coding

Bootstrap dropdown-menu prevented keys

I have an input field that shows suggestions with a dropdown menu while i type. My example is simpified, but the problem is the same.
If I have focus on the top menu item and press the arrow up key I would like to set focus on the input field (without closing the menu).
It seems like Bootstrap is preventing event bubbeling of some of the keys.
The escape key is just for testing. It's the arrow up key I want to use.
You can find a jsfiddle here.
EVENT KEY RESULT
keypress [any] not working
keydown arrowup not working
keydown escape working
keyup arrowup working, but will move focus when on second item too
HTML:
<div class="dropdown">
<input type="text" class="form-control">
<ul class="dropdown-menu" role="menu">
<li><a href="#" id='AAAA'>AAAA</a></li>
<li>BBBB</li>
<li>CCCC</li>
</ul>
</div>
JS:
$('.form-control').bind('keypress', function(event) {
if (event.key === 'ArrowDown') {
if ($('.dropdown').hasClass('open')) {
$('#AAAA').focus();
} else {
$('.dropdown').addClass('open');
}
}
});
$('#AAAA').bind('keyup', function(event) {
switch (event.key) {
case 'ArrowUp':
$('.form-control').focus();
break;
case 'Escape':
$('.form-control').focus();
break;
}
});

Well, I first closed the dropdown ( removed the open class ) and then focused on the input. It seems to be working now.
$('#AAAA').bind('keydown', function(event) {
switch (event.key) {
case 'ArrowUp':
$('.dropdown').removeClass('open');
$('input').focus();
break;
case 'Escape':
$('.form-control').focus();
break;
}
});
Edit ( After you updated your question ): keydown is being used by bootstrap. You can bind all events on keyup. keyup event fires after keydown so you don't need to use setTimeout()
$('#AAAA').bind('keyup', function(event) {
switch (event.key) {
case 'ArrowUp':
$('.form-control').focus();
break;
case 'Escape':
$('.form-control').focus();
break;
}
});
Edit 2 ( Solves the: If you press the up key when on the second item, you will release the key on the first item and it will set focus on the input ) I kept the use of setTimeout() to let bootstrap complete its own working. This will also let keypress work from bottom to input. jsFiddle Link
$('.dropdown').on('keydown.bs.dropdown.data-api', function(e) {
var index = $(this).find('li:not(.disabled):visible a').index(e.target);
if (!index && e.which == 38) {
setTimeout(function() {
$('.form-control').focus();
}, 1);
}
});

I solved it like this until anyone can find a better solution. I wrapped the focus() in a timer.
$('#AAAA').bind('keydown', function(event) {
switch (event.key) {
case 'ArrowUp':
setTimeout(function() {
$('.form-control').focus();
}, 1);
break;
case 'Escape':
$('.form-control').focus();
break;
}
});

How to detect right click + left click

I am building a game
And I need to do something when the user clicks on the right mouse button, holds it and then presses the left button
How can I detect this behaviour?

JSfiddle: https://jsfiddle.net/mkarajohn/pd725ch6/5/
var rightMouseClicked = false;
function handleMouseDown(e) {
//e.button describes the mouse button that was clicked
// 0 is left, 1 is middle, 2 is right
if (e.button === 2) {
rightMouseClicked = true;
} else if (e.button === 0) {
//Do something if left button was clicked and right button is still pressed
if (rightMouseClicked) {
console.log('hello');
//code
}
}
console.log(rightMouseClicked);
}
function handleMouseUp(e) {
if (e.button === 2) {
rightMouseClicked = false;
}
console.log(rightMouseClicked);
}
document.addEventListener('mousedown', handleMouseDown);
document.addEventListener('mouseup', handleMouseUp);
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});

Use MouseEvent.buttons in your event handler.
<element>.addEventListener("mousedown", function(event){
if ((event.buttons & 3) === 3){
//Do something here
}
}, true);
It is kinda recent though, you may want to implement fallback method, recording state of mouse buttons.

You can try this one.
window.oncontextmenu = function () {
showCustomMenu();
return false; // cancel default menu
}
on right click every browser has default menu for refreshing page, printing, saving and lot more but you can try this one and may be it will prevent default action and add your custom.
please write down answer if it will help you.

for right click use oncontextmenu and for left just set up click , just disable their default behaviours if you want too,
ex:
var left = 0,
right = 0;
document.onclick = function() {
console.log(++left);
return false;
};
document.oncontextmenu = function() {
console.log(++right);
return false;
};

Hie
check below code
<!doctype html>
<html lang="en">
<head>
<input type='button' value='Click Me!!!' id='btnClick'/>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$('#btnClick').mousedown(function(event){
switch (event.which) {
case 1:
alert('Left mouse button pressed');
break;
case 2:
alert('Middle mouse button pressed');
break;
case 3:
alert('Right mouse button pressed');
break;
default:
break;
}
});
});
</script>
</body>
</html>
For more reference refer
http://www.jquerybyexample.net/2011/04/find-which-mouse-button-clicked-using.html

Try
var hold=false;
function check(e) {
if(e.button==2) hold=true;
if(e.button==0 && hold) console.log('action');
}
function release(e) {
if(e.button==2) hold=false;
}
function noContext(e) { e.preventDefault(); }
.box { width: 100px; height: 100px; border: 1px solid black;}
Hold right mouse button and press left (on sqare)
<div class="box"
onmousedown="check(event)"
onmouseup="release(event)"
oncontextmenu="noContext(event)"
></div>

How to detect whether switch() matches one of its cases?

I have a code like this:
$("textarea").on('keydown', function(e){
if(e.ctrlKey){ // Ctrl is pressed
switch (e.which) {
case 66: // "B" button on the keyboard
alert("it is bold");
break;
case 73: // "I" button on the keyboard
alert("it is italic");
break;
}
e.preventDefault();
return false;
}
});
The above code handles Ctrl + B and Ctrl + I on keydown of textarea. Also there is two lines of code which stop every things:
e.preventDefault();
return false;
This ^ codes stops the action of any button. For example Ctrl + S is deactivate now ..! What I need is to define if that switch() function matches a case, then run those two lines, else don't run those two lines. How can I do that?

Try like this if key press other then Ctrl+B or Ctrl+I then it won't do anything.
$("textarea").on('keydown', function(e){
if(e.ctrlKey){ // Ctrl is pressed
var codes= [66,73];
var a = codes.indexOf(e.which);
if(a > 0){
return false;
}else{
// your stuff
}
}
});

Use the default case!
switch (e.which) {
case 66: // "B" button on the keyboard
alert("it is bold");
break;
case 73: // "I" button on the keyboard
alert("it is italic");
break;
default: // everything else
return; // without preventing the default action
}
e.preventDefault();
return false;

Disable right click menu on click

I am trying to build a minesweeper game with php and jquery. This means I want the user to be able to right-click elements to mark areas as a potential bomb or a questionmark. Now I have the right click event and the code works, however if I don't alert anything I get the menu with inspect element etc. I've tried throwing in some return false's but they haven't helped. How can I stop the menu appearing on right-click?
$('.overlay').mousedown(function(event) {
switch (event.which) {
case 1:
//left click code
break;
case 3:
theID = event.target.id;
if ($('#'+theID).is(":visible") && $('.bomb_'+theID).css("visibility") == "hidden"
&& $('.mystery_'+theID).css("visibility") == "hidden"){
$('#'+theID).css("background", "none");
$('.bomb_'+theID).css("visibility", "visible");
alert("x");
}else if($('.bomb_'+theID).is(":visible")){
$('.bomb_'+theID).css("visibility", "hidden");
$('.mystery_'+theID).css("visibility", "visible");
alert("y");
}else{
$('.mystery_'+theID).css("visibility", "hidden");
$('#'+theID).css("background", "#fff");
alert("z");
}
break;
}
});
Have tried to add event.preventDefault(); under the mousedown function but this doesn't change anything. Also tried it under case 3:.
Also return false; and event.stopImmediatePropagation(); don't work.

Have you tried this via the context menu event?
$(".overlay").on("contextmenu",function(e){
....
e.stopImmediatePropagation();
e.preventDefault();
return false;
});

You might want to try event.preventDefault();

How to change mouse left click and right click option?

I have some set of HTML files named in sequence. Is it possible to assign mouse right click to next html page and mouse left click to previous html page and how to do this?

This is how we handles the mouse click..
$('#element').mousedown(function(event) {
switch (event.which) {
case 1:
alert('Left mouse button pressed');
//code to navigate to left page
break;
case 2:
alert('Right mouse button pressed');
//code to navigate to right page
break;
default:
alert('Mouse is not good');
}
});

$(function(){
$(document).mousedown(function(event) {
switch (event.which) {
case 1:
window.location.href = "http://stackoverflow.com" // here url prev. page
break;
case 3:
window.location.href = "http://www.google.com" // here url next. page
break;
default:
break;
}
});
})
And don't forgot add jquery library.

You can also do this with some simple Javascript.
<script type='text/javascript'>
function right(e){
//Write code to move you to next HTML page
}
<canvas style='width: 100px; height: 100px; border: 1px solid #000000;' oncontextmenu='right(event); return false;'>
//Everything between here's right click is overridden.
</canvas>

This is the traditional way to override left and right clicks. In the code I'm preventing event propagation of the right-click also so the context menu won't display.
JSFiddle
window.onclick = leftClick
window.oncontextmenu = function (event) {
event = event || window.event;
if (event.stopPropagation)
event.stopPropagation();
rightClick();
return false;
}
function leftClick(event) {
alert('left click');
window.location.href = "http://www.google.com";
}
function rightClick(event) {
alert('right click');
window.location.href = "http://images.google.com";
}