Ability to warn user of unsaved changes when leaving a page

I’ve had a few clients this year ask for the ability to warn the user about unsaved changes when they try to leave a page. The user should then be able to either discard the changes and continue the navigation or cancel the navigation.

I’m thinking of a drag&drop widget that can be placed on a page and the developer could tell the widget which inputs to watch. The widget would then internally keep track of the original values and the changed values to determine when to show the message. (maybe not exactly this, but prevent the need for the developer to add an on change action to every input)

The widget needs the following customization:

• The text of the message displayed
• The text of the Proceed button
• The text of the Cancel button
• Which items on the page to watch for changes

The widget needs to detect leaving the page via:

• the Navigation menu
• a button with Show Page
• a button with Close Page
• a button with a Nanoflow that either Shows or Closes a Page
• a button with a Microflow that either Shows or Closes a Page
• the use of either the browser back or forward buttons
• the browser tab being closed
• the browser itself being closed

FYI custom messaging cannot be used to customize the message shown in Chrome when the browser tab is closed (deprecated). Chrome forces the use of its own messaging, but that is sufficient.