什么是 jquery.are-you-sure?
jquery.are-you-sure 是一个 jQuery 插件，用于在用户离开网页前提醒他们是否保存对表单的更改。它遵循了最佳实践，可以适应各种类型的表单，包括文本输入框、单选框、复选框、下拉菜单等。
如何使用 jquery.are-you-sure?
安装
使用 npm 在项目中安装 jquery.are-you-sure:
npm install jquery.are-you-sure
使用
在需要使用 jquery.are-you-sure 的页面中引入 jQuery 库和 jquery.are-you-sure 插件：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="node_modules/jquery.are-you-sure/jquery.are-you-sure.js"></script>
然后，在需要警告用户保存表单更改的表单元素上应用插件：
$('form').areYouSure();这会默认将表单元素的更改标记为“未保存”，并在用户试图离开当前页面时提示他们保存更改。
定制
除了默认的选项外，jquery.are-you-sure 还提供了一些可定制的选项。下面是一些常用的选项：
- message: 可以指定要显示的警告消息。例如：
$('form').areYouSure({
message: '您有未保存的更改。确定要离开此页面吗？'
});- dirtyClass: 可以指定在表单元素更改后要应用的 CSS 类，默认为"is-dirty"。例如：
$('form').areYouSure({
dirtyClass: 'my-dirty-class'
});如何使用 jquery.are-you-sure 避免用户误操作?
在某些情况下，用户可能会意外关闭当前页面，而未保存表单的更改。为了避免这种情况的发生，jquery.are-you-sure 提供了一个叫做“钩子”（hook）的函数，可以在用户试图关闭页面时询问用户是否关闭当前页面。
window.onbeforeunload = function() {
if ($('form').hasClass('dirty')) {
return "您有未保存的更改。确定要离开此页面吗？";
}
}这个函数将在用户试图关闭当前页面时询问以下问题：“您有未保存的更改。确定要离开此页面吗？”如果用户单击“取消”按钮，则会阻止当前页面的关闭操作，并保留所有未保存的表单更改。
示例代码
-- -------------------- ---- -------
--------- -----
----- -------------
------
----- ----------------
-------------------------- ------------
------- --------------------------------------------------------------------------------
------- -----------------------------------------------------------------------
-------
---- -
-------- -----
-
--------- -
----------------- --------
-
--------
-------
------
----------------------- ---------
------
------ -----------------------
------ ----------- ------------ ---------- --------------------
------ -------------------------
--------- -------------- -----------------------------------
------ --------------------------
------- --------------- --------------
------- ----------------------------
------- ----------------------------
------- ----------------------------
-----------------
------ --------------- ------------ -----------
------ ----------------- ------------------- -------------------
------- -------------------------
-------
--------
---------------------------- -
----------------------
-------- ----------------------
----------- ----------
---
--------------------- - ---------- -
-- ----------------------------- -
------ ----------------------
-
-
---
---------
-------
-------结论
jquery.are-you-sure 是一个方便的插件，可以帮助用户避免因意外关闭当前页面而丢失表单更改。使用 jquery.are-you-sure 可以方便地向表单元素添加警告功能，并可通过可定制的选项进行适当调整。建议在表单功能严重依赖于用户的数据输入时，使用 jquery.are-you-sure ，以避免误操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005662a81e8991b448e202c