Créer confirmation JavaScript lorsque les utilisateurs essaient de quitter la page sans enregistrer

Question

J'essaie de faire en sorte que si un utilisateur apporte des modifications à une page, puis essaie de quitter la page sans sauvegarder, un message apparaîtra avec un "OK" "bouton (pas de bouton" Annuler "). Cliquez sur le bouton "OK" pour fermer le message. L'utilisateur doit cliquer sur le bouton "Enregistrer" ou il continuera à recevoir le message, lui interdisant de quitter la page jusqu'à ce que le bouton "Enregistrer" soit cliqué. En quittant la page, je veux dire les empêcher de naviguer vers un autre onglet ou élément de menu dans le site ... s'ils cliquent sur un autre lien sur la page, cela leur donnerait le popup. Ils peuvent quitter leur site à tout moment.

Je pense avoir besoin d'un dialogue modal JavaScript pour me débarrasser du bouton Annuler mais je suis un peu incertain de l'implémentation.

Actuellement, j'utilise r = confirm (voir ci-dessous) mais il a le bouton d'annulation plus il donne l'option aux utilisateurs de quitter la page s'ils cliquent sur "OK". Je ne veux pas qu'ils soient en mesure de quitter la page sans cliquer sur le bouton "Enregistrer" ou ils devraient fermer toute la fenêtre.

Toute aide/explication est très appréciée car je suis très nouveau à ce sujet. Je vous remercie.

if (typeof unsaved != 'undefined') { 
if (unsaved == true) { 
var r = confirm("Please click Update. Unsaved changes will be lost."); 
if (r == false) { 
    saveNeeded = "true"; 
    } 
    else { saveNeeded = "false"; } 
} 
} 

Answer 1

Jetez un coup d'œil à onBeforeUnload.

Vous ne serez pas en mesure de forcer un utilisateur à rester sur le site, mais il fournira une fenêtre pop-up avec les boutons «Leave» et «Stay» quand ils tentent de fermer la fenêtre. Tous les navigateurs Web principaux permettent à l'utilisateur de laisser n'importe quelle page Web à volonté, et le plus que vous pouvez faire est de les avertir. OnBeforeUnload est probablement la meilleure solution multi-navigateur que vous aurez pour donner aux utilisateurs la chance de rester sur le site et d'enregistrer leurs modifications avant de partir.

<script language="JavaScript"> 
    window.onbeforeunload = confirmExit; 
    function confirmExit() { 
     return "Please click Update. Unsaved changes will be lost."; 
    } 
</script> 

Il serait très mauvaise pratique pour tenter de verrouiller un utilisateur à votre site Web sans option de départ, ce qui explique pourquoi il est pas pris en charge par tous les navigateurs Web principaux. S'il est si important que vous DEVEZ forcer l'utilisateur à faire quelque chose (et que vous avez le droit de le faire en tant que société ou autre), vous devez utiliser une autre plateforme ou écrire un plugin personnalisé dans le navigateur Web de l'utilisateur. Mais pour une utilisation générale, vous ne pouvez pas verrouiller leur navigateur.