Предупредить пользователя перед тем, как покинуть веб-страницу, если изменения не были сохранены
При поиске способа предупредить пользователя перед тем, как покинуть веб-страницу, если изменения не были сохранены, я нашел это решение: https://stackoverflow.com/a/48238659/9512437, но предупреждение появляется, даже если пользователь нажимает кнопку сохранения. Я попытался добавить событие, когда пользователь нажимает кнопку отправки, чтобы установить переменную, чтобы предупреждение не появлялось, но теперь предупреждение никогда не появляется.
Вот что я пробовал:
<script>
"use strict";
var btn_click = false;
(() => {
const modified_inputs = new Set;
const defaultValue = "defaultValue";
// store default values
addEventListener("beforeinput", (evt) => {
const target = evt.target;
if (!(defaultValue in target || defaultValue in target.dataset)) {
target.dataset[defaultValue] = ("" + (target.value || target.textContent)).trim();
}
});
// detect input modifications
addEventListener("input", (evt) => {
const target = evt.target;
let original;
if (defaultValue in target) {
original = target[defaultValue];
} else {
original = target.dataset[defaultValue];
}
if (original !== ("" + (target.value || target.textContent)).trim()) {
if (!modified_inputs.has(target)) {
modified_inputs.add(target);
}
} else if (modified_inputs.has(target)) {
modified_inputs.delete(target);
}
});
addEventListener("beforeunload", (evt) => {
if (modified_inputs.size && !btn_click) {
const unsaved_changes_warning = "Changes you made may not be saved.";
evt.returnValue = unsaved_changes_warning;
return unsaved_changes_warning;
}
});
addEventListener("")
})();
document.getElementById("submit").onclick = function save() {
btn_click = true;
}
</script>
Есть идеи, что я сделал не так?
Поскольку я не использую AJAX, я не думаю, что мне нужно (поправьте меня, если я ошибаюсь). В итоге я понял это сразу после публикации (хотя я до сих пор не уверен на 100%, что именно было причиной проблемы).
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Оказывается, я делал пару вещей неправильно. Я предполагаю, что добавление document.getElementById("submit").onclick в "use strict" либо вызвало ошибку (https://www.w3schools.com/js/js_strict.asp), либо вызвало проблему с обнаружением, поскольку простое добавление функции даже без && !btn_click привело к тому, что она не сработала. Еще мне пришлось сменить if (modified_inputs.size && !btn_click) { на if (modified_inputs.size >> 0 && !btn_click) {.
В конце концов, решение, которое в итоге сработало для меня, выглядит следующим образом:
<script>
var btn_click = false;
function save() {
btn_click = true;
}
"use strict";
(() => {
const modified_inputs = new Set;
const defaultValue = "defaultValue";
// store default values
addEventListener("beforeinput", (evt) => {
const target = evt.target;
if (!(defaultValue in target || defaultValue in target.dataset)) {
target.dataset[defaultValue] = ("" + (target.value || target.textContent)).trim();
}
});
// detect input modifications
addEventListener("input", (evt) => {
const target = evt.target;
let original;
if (defaultValue in target) {
original = target[defaultValue];
} else {
original = target.dataset[defaultValue];
}
if (original !== ("" + (target.value || target.textContent)).trim()) {
if (!modified_inputs.has(target)) {
modified_inputs.add(target);
}
} else if (modified_inputs.has(target)) {
modified_inputs.delete(target);
}
});
addEventListener("beforeunload", (evt) => {
if (modified_inputs.size >> 0 && !btn_click) {
const unsaved_changes_warning = "Changes you made may not be saved.";
evt.returnValue = unsaved_changes_warning;
return unsaved_changes_warning;
}
});
addEventListener("")
})();
</script>
Затем добавьте свой onclick к элементу:
<button type = "submit" class = "w3-button w3-right w3-theme" id = "button" onclick = "save()">Save</button>
Мне нравится это решение, потому что оно единственное, что я видел, не использует jquery.
Была такая же проблема. Спасибо.
Вы очищаете набор измененных входов при сохранении? Я не вижу этого здесь, но если вы этого не сделаете, это будет виноватым.