According to jQuery Mobile's documentation:
"Clicking the link that opened the panel, swiping left or right, or tapping the Esc key will close the panel. (...) By default, panels can also be closed by clicking outside the panel onto the page contents."
http://api.jquerymobile.com/panel/
The same documentation shows how to turn off "swipe to close" and "close by clicking outside".
But how to disable closing by the Esc key?
You could do something like this:
$("body").on("keyup", function(e){
if (e.which === 27){
return false;
}
});
This will disable the escape key from closing a panel when one is open. This might interfere with other functions, and you probably could specify what element you want the event attached to. You can read more on return false here.
I made a very simple and lazy example of it working.
Related
(Yes, I know this is similar to How can I attach an react to user clicking on tabs in Ext.TabPanel, but it is a different question)
I have a tabpanel, the panels of which can be accessed either by clicking on a tab, or by clicking links in other tabs. One tab in the tabpanel has a menu for the user to select the desired subpanel. What I am trying to achieve is that clicking on the tab does not activate it - thus forcing the user to select an option from the menu. However, I still want the panel to activate when a link on another panel is clicked, or when a menu option is selected.
This is how I disable the panel:
'beforeactivate': function (component, eOpts) {
//to prevent loading tab content on tab/menu click
console.debug('tab disabler', arguments);
return false;
}
It works - just works too well, blocking everything. I have not been able to find a way to detect the difference between clicking the tab and, well, doing anything else at all.
Basically you already described the problem: you want to prevent activation of the tab only when the tab header is clicked, not altogether, so the beforeactivate event is not the way to go.
You can access the tab header (which is basically just a button in the tab bar) via the tab property on the panel and prevent the execution of its handler by stopping the propagation of the click event:
panel.tab.on({
'click': function(tab, e) {
e.stopEvent();
}
});
Note: the docs say you can also return false to achieve the same, however that does not seem to work.
This won't affect activation of the panel at all, but the interaction on the tab header.
Check out this fiddle for a working example.
Anchor tag is opening in new window while we have clicked middle button of mouse. I want to disable this new window/tab. The belwo provided code is working in chrome.
$("a").on('click', function(e) {
if( e.which == 2 ) {
e.preventDefault();
}
});
Checked following links:
Triggering onclick event using middle click
Disable middle mouse button for modal dialog
According to some better is to change anchor tag to some other tabs, but I need the default behavior of anchor tab in left click, I need to disable middle and right clicks. Somebody help me to solve this.
Note: Many questions are asked regarding the same, but this exact issue is not yet asked.
This is not working in Firefox. I need to solve this issue in Firefox too.
fiddle
This is for blocking middle clicking entire document on firefox. You can check whatever element by e.target. Its need jQuery, but u could also use vanilla js
$(document).on('auxclick', function(e) {
if( e.button == 1 )
alert('Its blocked globally');
e.preventDefault();
return false;
}
})
Pure html solution, no javascript:
Click me
I am using jQuery to manage a keypress on my document and open a new window:
$(document).keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13') {
// Open a new window
}
});
The problem is I have a jQuery accordion that I want to stay CLOSED until a user explicitly clicks on it. I managed to get the accordion to not open on the 'enter' keypress, but if another window opens in a new tab and becomes active, the accordion opens.
Problem is I have no idea to find out what even is getting fired on the accordion that allows it to open.
Is there a way to nuke all events on an element and then just add back the one that you want (in my case the mouse down or click)? Or to report which events are being handled by that element so that I could just try to unbind that one?
Have you tried reading through the "active" portion in
http://api.jqueryui.com/accordion/#option-active ?
i.e Setting active to false will collapse all panels
I've found this scriptlet to be really helpful when trying to find out which events are attached to which dom elements. I might help you work out what's going on - Visual Event
I'm building my first application where I have to have compliance with keyboard navigation for accessibility reasons.
My problem has to do jquery-ui modal dialog boxes. If the user presses tab on the last control of the dialog (cancel button for this app), focus goes outside of the dialog box. Or presses shift-tab on the first control in the dialog box.
When the user does this, it isn't always possible to tab back into dialog box. IE8 and FF8 behave somewhat differently in this respect. I've tried to capture the tab key with the following event handler -
lastButton.keydown(function (e) {
if (e.which === TAB_KEY_CODE) {
e.stopPropagation();
$(this).focus();
}
});
But this doesn't work as it appears the browser processes the key press after jquery is done.
Two questions -
For Accessibility compliance, do I even have to worry about this? Although, for usability reasons, I think that I should.
Is there a way to make this work?
My problem has to do jquery-ui modal dialog boxes. If the user presses tab on the last control of the dialog (cancel button for this app), focus goes outside of the dialog box. Or presses shift-tab on the first control in the dialog box.
... and then tabbing occurs below the modal box, under a grey semi-transparent layer with scrollbar jumping from bottom to top after a few keypresses? Yes, this is a concern for sighted users who use the keyboard to browse and won't know how to go back to the modal box without pressing Tab a hundred times. Blind people won't even know the modal box is still displayed (they still can see/hear the entire DOM with their screen reader!) and that the page/script is waiting for a submit or cancel decision so it's also a concern for them.
An example done right is shown at http://hanshillen.github.com/jqtest/#goto_dialog (click on Dialog tab, direct link with anchor doesn't work :/ ). It'll tab forever inside the modal box till you click on Close or OK and will put you back on the focused element that triggered the modal box (I think it should focus the next focusable element after leaving the modal box but nevermind, this isn't the biggest accessibility problem here).
This serie of scripts is based on jQueryUI and are highly improved for keyboard and ARIA support and any accessibility problem that could exist in the original scripts. Highly recommended! (I tried to mix jQuery UI original scripts and these ones but didn't manage to get anything working, though you don't need to do so: these scripts work fine by themselves)
Maybe you should prevent the default action with preventDefault() instead of stopping the propagation and use keypress instead of keydown.
In this way there should be no need to regain focus.
Stopping the propagation doesn't work because it just prevent the event from bubbling up. You could think about using stopImmediatePropagation() but i think that changing input on the pression of the tab can't be stopped that way and preventDefault() is more correct.
lastButton.keypress(function (e) {
if (e.which === TAB_KEY_CODE) {
e.preventDefault();
}
});
fiddle here: http://jsfiddle.net/jfRzM/
Im a little late to the party, but I found I had to call preventDefault in the other keyboard events as well.
ex) I was setting the focus in the keyup event. But the browser was still doing its thing in either keydown or keypress. So I had something like this (I used JQuery/Typescript, but the idea should translate to about anything):
elem.keyup(this.onDialogKeyPress);
elem.keydown(this.onDialogPressPreventDefault);
elem.keypress(this.onDialogPressPreventDefault);
...
private onDialogPressPreventDefault = (e: KeyboardEvent) => {
const keys = [9, 27];
if (keys.includes(e.which)) {
e.preventDefault();
return false;
}
}
private onDialogKeyPress = (e: KeyboardEvent) => {
// Tab
if (e.which == 9) {
e.preventDefault();
// Do tab stuff
return false;
}
// Esc
else if (e.which == 27) {
e.preventDefault();
// Do Esc stuff
return false;
}
}
Actually, there was (is still) a bug in jQuery: http://bugs.jqueryui.com/ticket/4511.
The reason for this behavior (from the bug description comments): "The dialog itself binds keydown event to itself for closing the dialog on ESC; in addition, the dialog overlay binds a keydown event to the document, without filtering to close only the active dialog."
I cannot come up with an idea of an acceptable workaround. Is there anyone who has had to deal with it yet?
Very simple - upon creating a modal dialog, run this:
$([document, window]).unbind('.dialog-overlay');
If you create more then one modal dialog, hitting ESC will close the top one only.
Then once you focus on the bottom dialog, hit ESC and it will close it as well.
Hope this helped!
P.S. jQuery UI developers should add an option when you want all dialogs close at once upon hitting ESC key or only the focused ones.
Easiest thing is I have added event.stopPropagation(); in close function before return self; in jquery.ui.dialog.js file. And I am done with problem of closing dialog boxes one by one on escape keydown. Let me know if anyone find any better solution.
EDITED:
this need to add because while clicking on close button event object is undefined.
if(typeof event != 'undefined'){
event.stopPropagation(); }
The root of the problem is that jQuery UI keydown event propagates through all dialogs. A fix in the original jQueryUI Dialog code would be to add event.stopPropagation() when topmost dialog was successfully closed and check event.isPropagationStopped() at the beginning of the same keydown event.
As a workaround I did, thanks for Jazzer, the following.
Set dialog option closeOnEscape to false
When dialog gets created, append:
//newDialog is dialog's content, e.g. var newDialog = $('my dialog content>');
newDialog.keydown(function(event) {
if (mydialogs.hasOpenDialogs() &&
event.keyCode &&
event.keyCode === $.ui.keyCode.ESCAPE) {
$(newDialog).dialog("close");
event.preventDefault();
event.stopPropagation();
}
});
when document is loaded do:
$(function(){
//allow for ESC to close only top dialog
$(document).bind('keydown', function(event) {
if (event.isPropagationStopped()) return true;
if (mydialogs.hasOpenDialogs() &&
event.keyCode &&
event.keyCode === $.ui.keyCode.ESCAPE) {
mydialogs.closeTopDialog();
event.preventDefault();
event.stopPropagation();
}
});
});
Event in (2) happens when user hits ESC while typing text in input box inside of the dialog.
Event in (3) happens when user hits ESC somewhere else.
mydialogs here is a wrapper around stack (array) of modal dialogs, where every new dialog adds itself via .push() and in .close() removes itself with .pop().