javascript - 有什么好的建议可以提醒/提醒用户在网页上编辑字段后保存？

Question

我有一个 asp.net-mvc 站点和一个包含大量可编辑字段表行等的页面，所有这些都可以编辑。因为页面很长，所以在给定屏幕尺寸的屏幕上，保存按钮通常不可见。

我们遇到了人们说他们进行更改但他们忘记单击“保存”的问题，因为它在屏幕上并不明显。我想要一个解决方案，一旦用户做出更改，这些更改还没有被持久化，直到他们点击保存。

有没有推荐的最佳实践/例子来做这样的事情？

Answer 1

我会亲自实现一个通知弹出窗口，例如Bootstrap Notify。我会在 X 分钟后创建一些 JS 来执行通知。

Answer 2

我喜欢显示引导警报。我将警报绝对定位在我的页面顶部，如下所示：

我使用辅助对象JSFiddle

(function() {

    var notify = new Notify({
        container: document.getElementById('alerts'),
        template: `<div class="alert alert-{{type}}" role="alert"><div class="text-center">{{message}}</div></div>`
    });

    notify.danger('Some error message');

}());

Answer 3

您可以在屏幕上弹出一个 toastr，如下所示：

<script>
$(document).ready(function () {
    toastr.options.showMethod = 'slideDown';
    toastr.options.closeButton = true;
    toastr.info('Don't forget to save');

    {

    }
});
</script>

在捆绑配置中执行以下操作：

bundles.Add(New StyleBundle("~/Content/css").Include("~/Content/bootstrap.css",
        "~/Content/toastr.css"));

bundles.Add(New ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery-{version}.js",
        "~/Scripts/toastr.js"))