JS метод Object.confirm()

Загальний опис

Метод confirm() об'єкта Window відіграє важливу роль в інтеракції з користувачем, надаючи можливість відображення діалогового вікна з підтвердженням. Цей метод виводить модальне вікно з заданим повідомленням та двома кнопками: "OK" та "Скасувати". Використовується для отримання згоди або підтвердження від користувача перед виконанням певних дій, як-от видалення файлів, вихід з системи, зміни важливих налаштувань тощо. Метод повертає булеве значення: true, якщо користувач натиснув "OK", і false, якщо вибрано "Скасувати".

Використання confirm()

1. Базове використання: Найпростіший спосіб використання confirm() полягає в виведенні діалогового вікна з повідомленням. Результат вибору користувача може бути збережений у змінній.

    let userResponse = confirm("Ви впевнені, що хочете вийти?");
    if (userResponse) {
        console.log("Користувач підтвердив вихід.");
    } else {
        console.log("Користувач скасував вихід.");
    }
   

   У цьому прикладі користувачеві показується діалог з питанням про вихід, а програма реагує залежно від його вибору.

2. Контроль потоку програми: Метод confirm() можна використовувати для управління потоком програми на основі рішення користувача. Це особливо корисно у сценаріях, де потрібна взаємодія з користувачем перед виконанням критичних дій.

    if (confirm("Ви впевнені, що хочете видалити цей файл?")) {
        // Логіка видалення файлу
        console.log("Файл видалено.");
    } else {
        console.log("Видалення файлу скасовано.");
    }
   

   Тут діалог confirm() використовується для отримання підтвердження перед видаленням файлу.

3. Інтеграція з HTML-елементами: Метод confirm() може бути інтегрований з HTML-елементами, наприклад, з кнопками або посиланнями, для створення інтерактивних інтерфейсів.

    <button onclick="confirmDeletion()">Видалити акаунт</button>
   

    function confirmDeletion() {
        if (confirm("Ви впевнені, що хочете видалити свій акаунт?")) {
            // Логіка видалення акаунту
            console.log("Акаунт видалено.");
        } else {
            console.log("Видалення акаунту скасовано.");
        }
    }
   

   У цьому випадку, при натисканні на кнопку, відображається діалогове вікно, що підтверджує намір користувача видалити свій акаунт.

4. Попередження перед залишенням сторінки: confirm() також може використовуватися для попередження користувачів перед залишенням сторінки або веб-форми з незбереженими змінами.

    window.onbeforeunload = function() {
        return confirm("Ви маєте незбережені зміни. Ви впевнені, що хочете залишити сторінку?");
    };
   

   Цей код виводить діалогове вікно підтвердження, коли користувач намагається залишити сторінку.

Застереження при використанні confirm()

Важливо враховувати, що confirm() створює модальне вікно, яке блокує інші взаємодії зі сторінкою, поки вікно не буде закрите. Це може впливати на користувацький досвід, особливо при неправильному або надмірному використанні. Також важливо пам'ятати, що відображення діалогових вікон може відрізнятися в різних браузерах, і користувачі можуть мати можливість вимкнути ці спливаючі вікна. Тому слід обережно використовувати confirm() у сценаріях, де необхідно забезпечити плавний та приємний досвід користувача.

правити

Порада

Уникайте надмірного використання confirm() на вашій веб-сторінці, оскільки це може бути нав'язливим та негативно впливати на користувацький досвід. Замість цього, використовуйте цей метод у ключових моментах, де дійсно необхідне підтвердження користувача.

автор: Bond правити

Порада

Метод confirm() повертає булеве значення - true, якщо користувач натиснув "ОК", і false, якщо натиснув "Скасувати". Використовуйте це для вирішення подальших дій у вашому скрипті. Наприклад, виконуйте дію тільки, якщо результат confirm() є true.

автор: Bond правити

Порада

Передавайте власний рядок тексту як аргумент у confirm() для відображення специфічного повідомлення, що відповідає контексту використання. Це дозволяє зробити інтеракцію з користувачем більш інформативною та зрозумілою.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

confirm(message)

Параметри

message

Рядок тексту, який буде відображений у діалоговому вікні підтвердження.

автор: Bond

правити

Повернення

boolean

Повертає булеве значення: true, якщо користувач натиснув "ОК", та false, якщо вибрано "Скасувати". У разі, якщо браузер ігнорує діалогові вікна на сторінці, то повертане значення завжди буде false. Це дозволяє розробникам визначати, як відповів користувач на запитання, представлене у діалоговому вікні, та відповідно керувати подальшою логікою програми.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3	12	4

Підтримка: мобільні переглядачі

Переглядач
	1	18	4	1

Підтримка: серверні переглядачі

Переглядач
	1.5

Приклади

+ запропонувати свій приклад у пісочниці

// Функція для видалення елементу
function deleteElement(elementId) {
    if (window.confirm("Ви впевнені, що хочете видалити цей елемент?")) {
        let element = document.getElementById(elementId);
        if (element) {
            element.remove();
            console.log("Елемент видалено.");
        } else {
            console.log("Елемент не знайдено.");
        }
    } else {
        console.log("Видалення скасовано користувачем.");
    }
}

// Функція для видалення елементу
function deleteElement(elementId) {
    if (window.confirm("Ви впевнені, що хочете видалити цей елемент?")) {
        let element = document.getElementById(elementId);
        if (element) {
            element.remove();
            console.log("Елемент видалено.");
        } else {
            console.log("Елемент не знайдено.");
        }
    } else {
        console.log("Видалення скасовано користувачем.");
    }
}