Avertir un utilisateur de la perte de données en cas de retour à la page précédente

**supcomingenieur** · 27/05/2013, 16h52

Bonsoir,
J'ai une page d'inscription que l'utilisateur devrait remplir pour devenir membre. je voudrais avertir mon utilisateur de la possibilité de parte de données dans le cas ou il apuie sur le bouton précédent du navigateur avant de confirmer le formulaire.

Comment je pourrais faire?
Merci d'avance.

**Bovino** · 28/05/2013, 11h14

+

Comment savoir si l'utilisateur a appuyé sur le bouton précédent ou suivant du navigateur ?

**supcomingenieur** · 28/05/2013, 11h31

la page que tu m'as indiqué ne s'affiche pas

**SpaceFrog** · 28/05/2013, 11h33

sisi...

mais bon je resume :

Question:
Comment savoir si l'utilisateur a appuyé sur le bouton précédent ou suivant du navigateur ?

Reponse
Il n'est pas possible de récupérer ces événements en JavaScript.

**supcomingenieur** · 28/05/2013, 11h48

alors c'est possible en quels langages?

**Bovino** · 28/05/2013, 11h50

Aucun

**supcomingenieur** · 28/05/2013, 12h22

Nom : image.png
Affichages : 100
Taille : 501,8 Ko

je t'ai mis un imprim_ecran de mon interface graphique pour que tu puisse voir le décalage du bouton "log out" par rapport à la barre horizontale (en leu claire)

merci

**danielhagnoul** · 29/05/2013, 12h07

Envoyé par Bovino

+

Comment savoir si l'utilisateur a appuyé sur le bouton précédent ou suivant du navigateur ?

Ce n'est plus impossible !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0">
	<meta name="author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
	<script>
		"use strict";
 
		head.js( 
			"http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js", 
			"http://code.jquery.com/jquery-2.0.0.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/i18n/jquery-ui-i18n.min.js",
			"http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js",
			"http://danielhagnoul.developpez.com/lib/dvjh/base.js",
			function(){
 
				$( function(){
 
 
				});
 
				$( window ).load( function(){
 
					/*
					 * Pour les navigateurs non obsolètes et avec l'API History
					 * c'est possible.
					 *
					 * OK avec Chrome et Firefox. IE10 ? Devrait fonctionner.
					 * 
					 * https://developer.mozilla.org/en-US/docs/Web/API/window.history
					 * 
					 * 1) créer les états history
					 * 2) écouter l'événement "popstate"
					 * 3) générer les événements "nextState" ou "previousState"
					 */
					history.pushState( -1, null ); // back state
					history.pushState( 0, null ); // main state
					history.pushState( 1, null ); // forward state
					history.go( -1 ); // start in main state
 
					$( window ).on( "popstate", function( event ){
						var state = event.originalEvent.state;
 
						if ( state && state != 0 ){
							$( window ).trigger( state > 0 ? "nextState" : "previousState" );
 
							// reset history state
							history.go( -state );
						}
					});
 
					$( window ).on( "nextState", function(){
						console.log( "le bouton suivant a été cliqué" );
					});
 
					$( window).on( "previousState", function(){
						console.log( "le bouton précédent a été cliqué" );
					});
 
				});
 
			}
		);
	</script>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/sunny/jquery-ui.min.css">
	<style>
		/* TEST -- Nota bene : ici 1 rem est égal à 1 px, voir dvjhRemBase.css */
	</style>
</head>
<body>
	<header>
		<hgroup>
			<h1>Forum jQuery</h1>
			<h2>
				<a href="">Lien</a>
			</h2>
		</hgroup>
	</header>
	<section class="conteneur">
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2013-05-29T01:07:35.985+02:00" pubdate>2013-05-29T01:07:35.985+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
</body>
</html>

**pinguix** · 30/05/2013, 17h15

Salut,
Tu peux utiliser l'attribut javascript "onbeforeunload" sur ta balise body et effectuer une boîte de dialogue en javascript, exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<body onbeforeunload="alert('Vous allez tout perdre ...');">
...

En espérant avoir t'aidé bonne continuation pour ton site *@+

Avertir un utilisateur de la perte de données en cas de retour à la page précédente

JavaScript

Vue hybride

Discussions similaires

Partager

Partager