输入监控

这将监视未保存更改的用户输入，并在用户尝试离开页面时显示确认框。当表单数据更改时，脚本将“oc-data-changed”类添加到表单元素。

<form
    data-change-monitor
    data-window-close-confirm="There is unsaved data"
>
    ...
</form>

#Example

单击“标记已更改”按钮和“重新加载页面”。

<form
    data-window-close-confirm="There is unsaved data"
    data-change-monitor>

    <button type="button" onclick="$(this).trigger('change')">
        Mark changed
    </button>

    <button type="button" onclick="$(this).trigger('unchange.oc.changeMonitor')">
        Mark saved
    </button>

    <hr />

    <button type="button" onclick="window.location.reload()">
        Reload page
    </button>

</form>

#支持的数据属性

• data-change-monitor - 启用插件表单
• data-window-close-confirm - 当浏览器窗口关闭并且有未保存的数据时显示的确认消息

#支持的事件

• change - 将表单数据标记为“已更改”。该事件可以在表单中的任何元素或表单本身上触发。
• unchange.oc.changeMonitor - 将表单数据标记为“未更改”。该事件可以在表单中的任何元素或表单本身上触发。
• pause.oc.changeMonitor - 临时暂停更改监视。该事件可以在表单中的任何元素或表单本身上触发。
• resume.oc.changeMonitor - 恢复变更监控。该事件可以在表单中的任何元素或表单本身上触发。

#触发事件

• changed.oc.changeMonitor - 当表单数据改变时触发。
• unchanged.oc.changeMonitor - 当表单数据不变时触发。
• ready.oc.changeMonitor 在变更监视器实例完成初始化时触发。

#JavaScript API

$('#form').changeMonitor()