Close Bootstrap popover on esc keypress - javascript

I am trying to close bootstrap popover using ESC key press.
But it does not seem to be working when using:
$(document).keyup(function (event) {
if (event.which === 27) {
$('#example').popover('hide');
}
});
Here is the fiddle with bootstrap popover:
http://jsfiddle.net/mashinista/b2NKt/

The fiddle you included has the popover code, but not the escape code.
Add it and, as koala_dev pointed out, you should be fine:
Demo in fiddle
$('#example').popover();
$(document).keyup(function (event) {
if (event.which === 27) {
$('#example').popover('hide');
}
});
Also, this is very similar to how the modal escape function works

The problem with that arises when a tooltip is inside of a modal, because then the Esc key is expected to close the modal. It's a not good user experience if a user only wants to dismiss the tooltip but then the entire modal closes. So I would propose, if there are currently tooltips to dismiss, then a user will need to press Esc twice to close the modal (first time to dismiss tooltips), but otherwise once, as usually. Note: This is not ideal, especially for screen reader users, so take that as a food for the further thinking.
/**
* Accessibility: Close tooltips and popovers on ESC key (WCAG 1.4.13)
* Note: Using event capture:true to cancel the propagation preventing the modal to close at first (hence no `.on()` here)
* Tested with Bootstrap v3.4.1; Does not support IE 11
*/
$.fn.listenEscKeyToCloseOverlays = function () {
return this.each(function () {
if (("undefined" !== typeof $.fn.tooltip) || ("undefined" !== typeof $.fn.popover)) {
document.addEventListener('keydown', function(e) {
if ('Escape' === e.key) {
const $openTooltips = $('.tooltip');
const $openPopovers = $('.popover');
if ($openPopovers.length || $openTooltips.length) {
e.stopPropagation();
$openTooltips.tooltip('hide');
$openPopovers.popover('hide');
}
}
}, true);
}
});
};
$(document).listenEscKeyToCloseOverlays();

Related

Treat enter keydown as pressing the "Next" button across multiple modals

I have four modals that are each a step for filling out and submitting form. each modal has a "Next" button that closes the current open modal and opens the next in the process. I am trying to get the enter key to act as pressing the "next" buttons, and the "submit" button on the last step/modal.
This is my current code for a single modal(looks the same for all modals)
$("#user-lookup-modal").on('shown.bs.modal', function () {
$('#add_assistant_submit').prop('disabled', true);
$(document).keypress(function (e) {
if (e.keycode == 13 || e.which == 13) {
$('#add_assistant_next').trigger("click");
return true;
}
}) ;
});
However, this causes weird behavior where pressing enter in one modal counts as pressing enter in all previous modals as well. I tested that out with console output.
EDIT:
I tried this, which seemed to work but is it a poor solution since it will listen for keypresses at all times?
$(document).keypress(function (e) {
if ( e.keycode == 13 || e.which == 13) {
if ($("#myModal").data('bs.modal') || {isShown: false}).isShown) {
//trigger button
}
//... repeat for other modals
}
});
return false;

JQuery keydown event is only triggered once unless anything else happens

I'm trying to show a font awesome '?' after every element that has the ".info" class when the user is holding down the "alt" key. It appears to be working but when i release "Alt" and try to press it again nothing happens. But when i click the document it works again. See code sample:
jQuery(document).ready(function ($) {
var keyDown = false;
$(document).on("keydown", function (e) {
console.log(keyDown);
if (e.key == "Alt") {
if (!keyDown) {
$('.info').each(function () {
$(this).after("<a style=\"color:black;postion:absolute;\"><i class=\"fas fa-info-circle\"></i></a>");
});
}
keyDown = true;
}
});
$(document).on("keyup", function (e) {
if (e.key == "Alt") {
console.log("alt released");
$('.info').each(function () {
$(".fa-info-circle").remove();
});
keyDown = false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="info">Test</p>
EDIT: When using another key (i tested "i") it seems to work fine so i think it might be a Chrome issue.
Chrome has a number of keyboard shortcuts that use alt - for instance alt + home takes you to your home page.
you can see all the shortcuts here:
https://support.google.com/chrome/answer/157179?hl=en-GB
if you want to override Chrome's behaviour (which I do not recommend), you could add e.preventDefault() to your keydown function.

How to disable mouse middle button click to open in a new tab or new window

I am trying to disable right and middle button of mouse so that it cant open new window or tab when click on any menu or hyperlink. Below javascript code works fine for right button but not working for middle button. Middle button of mouse gets captured but still new window or tab opens when click on hyperlink or menu.
<script type="text/javascript">
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = function () {
return false;
};
}
else {
document.onmouseup = function (e) {
if (e != null && e.type == "mouseup") {
if (e.which == 3) {
alert("Sorry..... Right click Is Disabled!!!!");
return false;
}
if(e.which===2)
{
e.preventDefault();
e.stopImmediatePropagation();
alert("Sorry..... Mouse Scroll click Is Disabled!!!!");
return false;
}
else if(e.button===4)
{
e.preventDefault();
e.stopImmediatePropagation();
alert("Sorry..... Mouse Scroll click Is Disabled!!!!");
return false;
}
}
};
}
Its not woking for firefox, chrome and IE.
try
document.onmousedown= function (e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button");
}
}
According to MDN the auxclick event handles the "open link in new tab with middle mouse button" behaviour.
The following code will prevent the middle click behaviour on the entire page.
window.addEventListener("auxclick", (event) => {
if (event.button === 1) event.preventDefault();
});
If you want to disable it for a certain link only, just replace the event listener target (window) with a reference to the specific node.

how to unbind/prevent context menu by keyboard (key #93) with FF?

I want to prevent the default event on key #93 (select, between alt gr and ctrl right on AZERTY keyboard).
This key open context menu like right click.
I tried :
$(document).off('keydown');
$(document).off('keyup');
$(document).off('keypress');
$(document).on('keypress', function(e){
if(e.keyCode == 93)
{
e.preventDefault();
return false;
}
});
$(document).on('keyup', function(e){
if(e.keyCode == 93)
{
e.preventDefault();
return false;
}
});
$(document).on('keydown', function(e){
if(e.keyCode == 93)
{
e.preventDefault();
return false;
}
});
Nothing works... I have always the contextmenu.
After checking for a while, I've been headed to another question similar to this one, but with a very different matter.
In any case, since the problem is the context menu, you don't even need jQuery for such, and the solution (despite it WON'T always work in firefox because the user may set it to disable such) is this one:
document.oncontextmenu = function (e) {
e.preventDefault();
return false;
}
fiddle:
http://jsfiddle.net/0kkm1vq0/3/
Works on chrome as well, and you won't need to use the keyboard listeners.
Reference: How to disable right-click context-menu in javascript
(which is really the same as key #93).
** note that this will disable the right click too **.
EDIT:
Not sure if this is cross-browser (the UPDATED code below seems to be working for both chrome and firefox, didn't try IE and others though), but the event fired by key #97 seems to be identified as 1, while the click seems to be identified as key 3, so you can just:
(function($){
if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
$(document).on('keyup', function(e) {
e.which == 93 && e.preventDefault();
});
}
else {
document.oncontextmenu = function (e) {
e.which == 1 && e.preventDefault();
}
}
})(jQuery);
http://jsfiddle.net/0kkm1vq0/10/
To disable JUST the key and not the right click.

Use javsascript escape keypress to untoggle window shut

I have the first bit of js toggling a div that helps users see current conversions. I was hoping to tie in the escape keypress to close the popup. I know the keypress code (which you can see below my fn) but my syntax isn't coming through tying them together. Any help is oh so very welcome!
/* currency converter */
$('#link-currency').click(function (e) {
e.preventDefault();
$('#popup-currency').toggleClass('active');
});
$('body').keypress(function (e) {
alert(e.which);
if(e.which == 27){
// Close my modal window
}
});
Try keyup on the document:
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$('#popup-currency').removeClass('active')
}
});

Categories

Resources