Preventing Accidental Moving Off Site With JavaScript

19th November 2008 - 4 minutes read time

There is nothing more irritating than when you are typing out a long message in a text box and you accidentally move backwards, or clicking on a link and moving off page, therefore losing data you may have entered. There is a solution to stop this happening and it involves the onbeforeunload event.

Although not technically a fully supported event, onbeforeunload is run just before the page is unloaded out of cache. The onunload event occurs right after this, and it is too late by that point.

To prevent a user from moving out of the current page without some form of warning you will need to return some text with the onbeforeunload event. In some browsers that text will be used as part of the message, some browsers will ignore the message but continue anyway.

Include the following body tag in the page you want to incorporate this feature into.

<body onbeforeunload="return 'Warning!';">

This will produce something like the following window.

onbeforeunload event warning

You can also enable this in your code by using the window object in the following way.

<script type="text/javascript">
window.onbeforeunload = runPageUnload;
function runPageUnload(){
 return 'wibble';
}
</script>

You can now include this script in the form itself to prevent users from navigating away from it whilst filling in information. This stops you having to put it on every page, which soon becomes an annoyance.

Note that this doesn't work in Opera, and it doesn't look likely that it will ever work as the Opera team say this is not a bug, despite the fact that every other web browser I can find does it this way.

JavaScript
onbeforeunload

Add new comment

The content of this field is kept private and will not be shown publicly.
CAPTCHA
1 + 1 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

Related Content

Creating A Simple Pie Chart With CSS

25th December 2022

A pie chart is a great way of showing the relationship between numbers, especially when showing percentages. Drawing a pie chart from scratch takes a fair amount of maths to get working and so people usually go for third party charting libraries in order to add charts to the page.

Read more

Getting Up And Running With Nightwatch.js

24th July 2022

Nightwatch.js is an end to end testing framework, written in JavaScript. It can be used to test websites and applications and uses the W3C WebDriver API to drive modern browsers to perform the tests.

In this article I will look at setting up Nightwatch.js in a project and getting started with writing tests.

Read more

Creating Presentations In Markdown With Marp

15th May 2022

Marp or Markdown Presentation Ecosystem is a collection of tools that allows the generation of presentations of different formats from a markdown template. The tools are written in JavaScript and have a number of options that allow presentations of different styles and formats.

Read more