[jQuery] jQuery 实践离开网页或表单前向使用者确认,以防止使用者误触离开按钮


刚好最近项目上需要用到这样的功能,现在用 jQuery 来操作网页上的效果都已经可以解决十之八九的问题了,而应该满多项目上都会遇到让使用者编辑的表单,如果使用者按完修改后要离开一般都会先跳出确认窗口,以防止使用者误触而导致 OOXX 的问题。在这边做个实践的方法并记录,希望对大家会有帮助,当然范例的方法只是一个方向,你当然可以依照你的需求去改写。


前言

刚好最近项目上需要用到这样的功能,现在用 jQuery 来操作网页上的效果都已经可以解决十之八九的问题了,应该满多项目上都会遇到让使用者编辑的表单,如果使用者按完修改后要离开一般都会先跳出确认窗口,以防止使用者误触而导致 OOXX 的问题。在这边做个实践和记录的方法,希望对大家会有帮助,当然范例的方法只是一个方向,你当然可以依照你的需求去改写。

功能需求

老板:“为什么我最近数据打到一半不小心点到其他连结就直接离开页面了,害我好几次都白打了这些客户数据!”

程序员:“所以老板需要一个当使用者有修改页面上的值离开时跳出确认窗口提供使用者吗?”

老板:“对!没错 ~ 快完成吧,以免引起客户的不满与客诉!”

开始实践

开始之前先说明一下如何达成吧:

  • 首先我们会声明一个全域变量 isChange 默认为 false
  • 而透过 jQuery 的 Change 事件去绑定页面上需要判断的元素,像是 Input、Select、Textarea … 等
  • 利用 window.onbeforeunload 的事件来处理,这个事件会在 window.onunload 之前发生,这很重要,因为是在之前发生所以我们可以在他触发 onunload 之前去处理我们要的动作。

补充:jQuery 版本 1.9.1

1.我们先看一个简单的 HTML

点部落


2.实践 jQuery 部分


就这样就可以解决老板交代的重任了,然后也可以快快乐乐的下班了(勿),而当我们修改页面上的 input 后按下浏览器关闭按钮后就会跳出下面的窗口来进行确认:

不过这样写会有一个问题,就是当我们按下 Submit 提交表单时一样会触发 onberofrunload 事件,一样会跳出这个消息来提醒使用者,但这样并不符合我们的需求,使用者正确提交表单代表是正常的离开页面,所以我们需要在加一段 JavaScritp 来将事件取消。

$("input:submit").click(function () {
    $(window).unbind('beforeunload');
});

范例程序

jQueryConfirm.rar

总结

需求总是千奇百怪,不过像这样离开前进行确认的需求,应该在每个有 CRUD 的页面上都加入,以防止发生客户客诉之类的问题,或是老是抱怨你们写的系统数据都会遗失... = = 等千奇百怪的理由,也希望遇到类似的问题时能解决大家的问题


参考连结


  • 如何避免使用者在特定网页表单在未经送出时意外离开

新手发文,如有错误烦请告知,感谢。
如果喜欢我的文章请按推荐,有任何问题欢迎下面留言~~~


签名:

学习这条路很广,喜欢什么技术不重要,重要的是你肯花时间去学习