I tried the solution based of lots of examples and the event works only if something else is clicked first eg. a link has been first right clicked on the same page. Then if I click the browser close button it prompts a warning before closing as expected.
Otherwise if I first go to the page or refresh it and click close button it doesn't work and page closes. The code inside onbeforeunload function hits each time but in the last case clearly has no effect.
$("button, a").bind("click", function () {
window.onbeforeunload = null;
});
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
// For Safari
return 'Sure?'; // the code hits each time - normally it does have no effect but if right-clicked a link on the page first it does work?
};
It looks as a very strange behaviour. Anyone has idea why this works only when another event has happened on the page first?
Tried in Firefox & Chrome.
It's a feature. According to MDN:
To combat unwanted pop-ups, some browsers don't display prompts created in beforeunload event handlers unless the page has been interacted with; some don't display them at all.
What is the use case where you need the onbeforeunload popup to be shown even with no user interaction? Usually these are for preventing data loss on unsubmitted forms, for instance. If the user wants to leave the page and there isn't any reason to show the popup, you shouldn't attempt to do so.
Related
i have a simple function on javascript where if the window position based on the url hashtag, so after the document is ready i execute my function normally, also i have add a hashchange event where i call the same function.
Everything works as expected except on internet explorer, if the user presses the enter on address bar without changing the hash (if he changes it works) then the function is not executed, any idea how to catch the event that the user pressed enter on the same url with same hashtag ?
When the user presses enter in the URL bar it loads the page, even if the adress wasn't changed. So, in your case it would simply refresh the page.
To capture this event you can use the onbeforeunload javascript event. This event gives you the ability to determine the navigation type. Use event.currentTarget.performance.navigation.type to determine the type of navigation. This is working in IE, FF and Chrome.
function CallbackFunction(event) {
if (event.currentTarget.performance.navigation.type == 1) {
console.log("refreshing page");
}
}
document.onbeforeunload = CallbackFunction;
Hopefully this was of some help to you!!
I'm struggling to disable default taphold browser event. Nothing that I have found on Google provided any help. I have only Android 4.4.4 mobile and Chrome dev tools for testing. I tried CSS fixes, such as webkit-touch-callout and others, but apparently they don't work for Android, also they don't work in Chrome dev tools.
I also tried detecting right click, (e.button==2), it doesn't work.
I came up with a solution, but it solves one problem and creates another. I just want to have a custom action for 'long press' event for selected anchors and I don't want the default pop up to appear (open in a new tab, copy link address, etc.)
This is what I did:
var timer;
var tap;
$("body").on("touchstart", my_selector, function(e) {
e.preventDefault();
timer = setTimeout(function() {
alert('taphold!');
tap=false;
},500);
});
$("body").on("touchend", my_selector, function() {
if(tap) alert('tap');
else tap=true;
clearTimeout(timer);
});
It successfully disables the default taphold event and context menu doesn't appear. However it also disables useful events, such as swipe. The links are in a vertical menu and the menu is higher than the screen, so a user has to scroll it. If he tries to scroll, starting on an anchor, it won't scroll, it will alert 'tap!'
Any ideas how could I disable taphold default or how could I fix this code so it disables only tap events and leave default swipe events enabled?
Edit: Now I thought about setting a timeout, if the pointer is in the same place for lets say 100ms, then prevent default action. However e.preventDefault(); doesn't work inside setTimeout callback.
So now I'm just asking about the simplest example. Can I prevent default actions after certain amount of time has passed (while the touch is still there).
And this is my whole problem in a fiddle. http://jsfiddle.net/56Szw/593/
This is not my code, I got this from http://www.gianlucaguarini.com/blog/detecting-the-tap-event-on-a-mobile-touch-device-using-javascript/
Notice that while swiping the box up and down, scrolling doesn't work.
I got the solution. It was so simple! I had no idea there's an oncontextmenu event. This solves everything:
$("body").on("contextmenu", my_selector, function() { return false; });
For an <img> I had to use event.preventDefault() instead of return false.
document.querySelector('img').addEventListener('contextmenu', (event) => {
event.preventDefault();
}
I have a form built in ASP.NET. The first control allows the user to choose a person from an auto-complete list. When the user pressed enter it would refresh the page and duplicate any information acquired through this first control. I am trying to remove the capability of the enter key from refreshing the page. This code all works in Chrome and IE7/8/9 (Don't care about 6). All I NEED is the return false for it to work in all browsers we support besides Firefox. The .click() is a bonus to add a bit of usability back to the key (so that it will activate the controls and check or uncheck check boxes, etc.)
None of this works in Firefox 12. The click occurs (proof that the code is reached when I want it) but the page refreshes every single time.
The focusNextInputfield() was one of the suggestions from a similar question and didn't do anything I wanted. It may have done what it was intended for but I can't tell because the page refreshed.
I found preventDefault() and stopPropagation() from yet another similar question on my own and it did nothing in FF.
I have even tried returning true for the heck of it.
$(document).keydown(function (event) {
//handles what happens when the user hits enter
if (document.activeElement.nodeName !== 'TEXTAREA') {
if (event.keyCode === 13 || event.which === 13) {
$(document.activeElement).click();
// $(document.activeElement).focusNextInputField();
event.preventDefault();
event.stopPropagation();
return false;
}
}
});
I am just looking for any suggestions or news on any reason none of this has any effect in FireFox 12? And I know that the code is reached and it all runs properly without error and even with all the excess code it still runs properly in Chrome and IE 7/8/9 as I said.
And through an earlier iteration I tried forcing the submit button to be clicked but it still refreshed anyway and validated and was overall a bad user experience.
Looks like you are using jQuery so all you need is to preventDefault in form submit event.
$j("#form-id").submit(function(e) {
e.preventDefault();
...
});
Or:
$j("#form-id").submit(false);
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;
}
}
I want to popup a message in window.onunload event.
Currently when user:
a) navigates away
b) closes the window
c) presses F5 or
d) presses refresh button in browser tool bar
The alert will appear., but I need it to not alert when user clicks the browser tool bar refresh button.
We added conditions for not alerting when users presses F5 or navigates away but alert should also not appear when users clicks browser refresh button.
Any type of workarounds would be nice.
I can offer a way to know if the user clicked on a browser button (back, forward, closing browser, etc...). I couldn't find any way to figure out which button was clicked,
But I hope it will help you.
To know if the user clicked on a browser button, follow these steps:
1. Register window.beforeunload event.
2. In the handler, check event.clientY.
3. If event.clientY is not defiend or event.clientY<0, then you know the user clicked a browser button.
For example:
(You probably will have to change the code to fit it to your problem)
function beforeUnloadHandler(eventArg)
{
var _e = window.event || eventArg;
// browser button click
if (isNaN(_e.clientY) || _e.clientY < 0)
{
// unload process will continue
// and unload event will be fired
return;
}
// a confirmation with 'test alert' text will appear
// if the user clicks 'Cancel', the unload process will stop
// and unload event won't be fired.
return "test alert";
}
window.onbeforeunload = beforeUnloadHandler;
This code will work in all major browsers: chrome, ff, ie9,ie8,ie7,ie6, opera 11, opera 10, safari 3,4,5.