Alert when browser window closed accidentally
We should prevent or prompt user that on performing these actions he will lose his data.
- Click on back browser button.
- Click on refresh browser button.
- Click on close button of browser.
- Click of forward browser button.
- Keyboard stroke- Alt+F4 (Close)
- Keyboard stroke- F5 (Refresh)
- Keyboard stroke-CTRL+ F5 (Refresh)
- Keyboard stroke-Shift+ F5 (Refresh)
- Change of url
- Or anything that cause postback other than your particular submit button.
To explain that I have used two textboxes, one Asp.net submit button with id TestButton.
Other postback controls that I have taken are
One other asp.net button,one checkbox with autopostback property true,one dropdownlist with autopostback property true.
Now I have used all these postback controls so that to show you that we also need to show promt to user about the data lose when user perform actions on these controls.
On submit button we will not show the prompt as we have to submit the data with that control action.Here is the sample code.I have set window.onbeforeunload method on controls change.
<html >
<head id="Head1">
<title></title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
// Prevent accidental navigation away
$(':input').bind(
'change', function() { setConfirmUnload(true); });
$('.noprompt-required').click(
function() { setConfirmUnload(false); });
function setConfirmUnload(on)
{
window.onbeforeunload = on ? unloadMessage : null;
}
function unloadMessage()
{
return ('You have entered new data on this page. ' +
'If you navigate away from this page without ' +
'first saving your data, the changes will be lost.');
}
window.onerror = UnspecifiedErrorHandler;
function UnspecifiedErrorHandler()
{
return true;
}
});
</script>
</head>
<body>
<form id="form1" name="myForm" runat="server">
<div>
First Name :<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
<br />
Last Name :<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
<br />
IsMarried :<asp:CheckBox ID="CheckBox1" runat="server" /><br />
<br />
<asp:Button runat="server" ID="TestButton" Text="Submit" CssClass="noprompt-required" /><br />
<br />
<br />
<br />
<br />
<asp:Button runat="server" ID="AnotherPostbackButton" Text="AnotherPostbackButton"
/><br />
<br />
<asp:CheckBox runat="server" ID="CheckboxWhichCausePostback" Text="CheckboxWhichCausePostback"
AutoPostBack="true" /><br />
<br />
DropdownWhichCausePostback<asp:DropDownList runat="server" ID="DropdownWhichCausePostback"
AutoPostBack="true">
<asp:ListItem Text="Text1"></asp:ListItem>
<asp:ListItem Text="Text2"></asp:ListItem>
</asp:DropDownList>
<br />
<br />
</div>
</form>
</body>
Above I have used:
$('.noprompt-required').click(function() { setConfirmUnload(false); });
What I have done in this line is I am calling setConfirmUnload
method and passing false as argument which will set the window.onbeforeunload
to null.
So what that means is on any control where you want that user should not be prompted, give that control the class .noprompt-required
and leave other as it is.
Displays message when are Tab closed By State Status in React
After searching I found the code that does it
const [state, setState] = React.useState(false);
useEffect(() => {
const cb = e => {
if (state) {
console.log({ s: state });
e.preventDefault();
e.returnValue = "Are you sure?";
}
};
window.addEventListener("beforeunload", cb);
return () => window.removeEventListener("beforeunload", cb);
}, [state]);
I am attaching an example
codesandbox
Reactjs Browser Tab Close Event
What you did is correct apart from the event name and the fact that alert will be blocked in that particular event.
You can show a message like this:
window.addEventListener("beforeunload", (ev) =>
{
ev.preventDefault();
return ev.returnValue = 'Are you sure you want to close?';
});
Hope this helps.
Related Topics
Jquery - Create Hidden Form Element on the Fly
Why Are Objects Not Iterable in JavaScript
What the Difference Between .Click and .Change on a Checkbox
Group by Array and Add Field and Sub Array in Main Array
Selecting Multiple Classes with Jquery
Angular2 Component's "This" Is Undefined When Executing Callback Function
JavaScript || or Operator with an Undefined Variable
JavaScript Es6 Cross-Browser Detection
Call JavaScript Function from Url/Address Bar
Getting Image Dimensions Using JavaScript File API
Ajax Post and Plus Sign ( + ) -- How to Encode
How to Detect Timeout on an Ajax (Xmlhttprequest) Call in the Browser
Can't Access Cookies from Document.Cookie in Js, But Browser Shows Cookies Exist
Chart.Js - Drawing an Arbitrary Vertical Line