Как написать функцию которая будет заменять prompt?

@AsuraEva · Регистрация: 09.08.2021

Студворк — интернет-сервис помощи студентам

При вызове этой функции должно показываться модальное окно с заголовком и текстом, а также с полем для ввода текста (input type="text"). А также две кнопки - OK и Cancel.

Указания:

Сделайте возможность передать один коллбэк.
При нажатии на кнопку OK - нужно вызывать коллбэк, куда передается значение, введенное в input.
При нажатии на кнопку Cancel - нужно вызвать коллбэк, куда передается значение null.
Также отрефакторите код, чтобы было как можно меньше дублирования с предыдущими функциями.

@mr_dramm · 03.09.2021, 22:47

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<html>
 
<head>
    <style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    html,
    body {
        height: 100%;
    }
 
    body {
        display: grid;
        place-items: center;
    }
 
    button {
        padding: 10px;
    }
 
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 50;
        background: rgba(0, 0, 0, 0.6);
    }
 
    .modal {
        position: fixed;
        z-index: 100;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
 
    .hide {
        display: none;
    }
    </style>
</head>
 
<body>
    <button class="open">Open</button>
    <div class="modal-overlay hide"></div>
    <div class="modal hide">
        <input type="text">
        <button class="ok">Ok</button>
        <button class="cancel">Cancel</button>
    </div>
    <script>
    function callback(arg = null){
        alert(`Ответ: ${arg}`)
    }
    [...document.querySelectorAll(".open, .cancel, .ok")].forEach(e => e.onclick = e => {
        document.querySelector(".modal-overlay").classList.toggle("hide")
        document.querySelector(".modal").classList.toggle("hide")
        const input = document.querySelector("input")
        switch(true){
            case e.target.classList.contains("cancel"):
                callback()
            break
            case e.target.classList.contains("ok"):
                callback(input.value)
            break
        }
        input.value = ""
    })
    </script>
</body>
 
</html>

@amr-now · 04.09.2021, 08:27

На flex:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .dialogOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: rgba(200, 200, 200, 0.5);
 
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        .dialog {
            width: 500px;
            height: fit-content;
            min-height: 200px;
            border: 1px solid black;
            background-color: #fff;
 
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
 
        .dialogHead {
            min-height: 2em;
            background-color: darkgrey;
 
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        .dialogBody {
            flex-grow: 1;
 
            padding: 0.5em;
        }
 
        .dialogInput {
            margin: 0 0.5em 1em 0.5em;
        }
 
        .dialogFoot {
            height: 1.5em;
            padding-bottom: 0.5em;
 
            display: flex;
            justify-content: center;
        }
 
        .dialogButton {
            width: 100px;
            margin: 0 0.5em;
        }
    </style>
</head>
<body>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam, quibusdam impedit soluta nobis, nemo perspiciatis
    recusandae ipsum architecto voluptas dignissimos blanditiis natus voluptates eligendi possimus consequatur saepe
    vitae, ducimus aut.
    <script>
        function myPrompt(title, innerHTML, callback) {
            let background = document.createElement("div");
            background.className = "dialogOverlay";
            let s = `
<div class="dialog">
    <div class="dialogHead">${title}</div>
    <div class="dialogBody">${innerHTML}</div> 
    <input type="text" class="dialogInput">
    <div class="dialogFoot">
        <button type="button" class="dialogButton dialogOk">OK</button>
        <button type="button" class="dialogButton dialogCancel">Cancel</button>
    </div>
</div>`;
            background.innerHTML = s;
            background.querySelector(".dialogOk").addEventListener("click", btn_click);
            background.querySelector(".dialogCancel").addEventListener("click", btn_click);
            document.body.appendChild(background);
 
            function btn_click() {
                background.remove();
                if (callback && typeof callback === "function")
                    callback(this.classList.contains("dialogOk") ? background.querySelector(".dialogInput").value : null);
            }
        }
 
        myPrompt(
            "Prompt!",
            `<div>This is a simple prompt.</div>
<div>with some <b>HTML</b> <i>contents</i></div>`,
            value => { alert("Выбрано: " + value); }
        );
    </script>
</body>
</html>

@mr_dramm · 04.09.2021, 11:14

немного гибкости для калбака, чтобы можно было его через аргумент передавать

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<html>
 
<head>
    <style>
        * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
 
    html,
    body {
        height: 100%;
    }
 
    body {
        display: grid;
        place-items: center;
    }
 
    button {
        padding: 10px;
    }
 
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 50;
        background: rgba(0, 0, 0, 0.6);
    }
 
    .modal {
        position: fixed;
        z-index: 100;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
 
    .hide {
        display: none;
    }
    </style>
</head>
 
<body>
    <button class="open">Open</button>
    <div class="modal-overlay hide"></div>
    <div class="modal hide">
        <input type="text">
        <button class="ok">Ok</button>
        <button class="cancel">Cancel</button>
    </div>
    <script>
    function callback(arg = null) {
        alert(`Ответ: ${arg}`)
    }
    const onclick = (cb, e) => {
        [...document.querySelectorAll(".modal-overlay, .modal")].forEach(e => e.classList.toggle("hide"))
        const input = document.querySelector("input")
        switch (true) {
            case e.target.classList.contains("cancel"):
                cb()
                break
            case e.target.classList.contains("ok"):
                cb(input.value)
                break
        }
        input.value = ""
    }
 
    [...document.querySelectorAll(".open, .cancel, .ok")].forEach(e => e.onclick = onclick.bind(null, callback))
    </script>
</body>
 
</html>

@amr-now · 04.09.2021, 14:40

AsuraEva, mr_dramm, отрефакторим код, чтобы было как можно больше кода.
В задаче же требуется отрефакторить )))
Ранее решения уже были приведены, но добавим условия из: https://learn.javascript.ru/forms-submit

Пользователь должен ввести что-то в текстовое поле и нажать Enter или кнопку «OK», после чего должна вызываться функция callback(value) со значением поля.
Если пользователь нажимает Esc или кнопку «ОТМЕНА», тогда вызывается callback(null).

Форма является модальным окном, это значит, что никакое взаимодействие с остальной частью страницы невозможно, пока пользователь не закроет его.
При показе формы, фокус должен находиться сразу внутри <input>.
Клавиши Tab/Shift+Tab должны переключать фокус между полями формы, не позволяя ему переходить к другим элементам страницы.

Мне показалось, что данные дополнительные требования справедливы и напоминают поведение оригинального prompt.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        .dialogOverlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: rgba(200, 200, 200, 0.5);
 
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        .dialog {
            width: 500px;
            height: fit-content;
            min-height: 200px;
            border: 1px solid black;
            background-color: #fff;
 
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
 
        .dialogHead {
            min-height: 2em;
            background-color: darkgrey;
 
            display: flex;
            justify-content: center;
            align-items: center;
        }
 
        .dialogBody {
            flex-grow: 1;
 
            padding: 0.5em;
        }
 
        .dialogInput {
            margin: 0 0.5em 1em 0.5em;
        }
 
        .dialogFoot {
            height: 1.5em;
            padding-bottom: 0.5em;
 
            display: flex;
            justify-content: center;
        }
 
        .dialogButton {
            width: 100px;
            margin: 0 0.5em;
        }
    </style>
</head>
 
<body>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam, quibusdam impedit soluta nobis, nemo perspiciatis
    recusandae ipsum architecto voluptas dignissimos blanditiis natus voluptates eligendi possimus consequatur saepe
    vitae, ducimus aut.<br>
    <input type="text" onfocus="console.log(777);"><br>
    <input type="text" onfocus="console.log(888);"><br>
    <input type="text" onfocus="console.log(999);"><br>
 
    <script>
        function myPrompt(title, innerHTML, callback) {
            let background = document.createElement("div");
            background.className = "dialogOverlay";
            let s = `
<div class="dialog">
    <div class="dialogHead">${title}</div>
    <div class="dialogBody">${innerHTML}</div> 
    <input type="text" class="dialogInput">
    <div class="dialogFoot">
        <button type="button" class="dialogButton dialogOk">OK</button>
        <button type="button" class="dialogButton dialogCancel">Cancel</button>
    </div>
</div>`;
            background.innerHTML = s;
            document.body.appendChild(background);
            let inputEl = background.querySelector(".dialogInput"),
                dialogOk = background.querySelector(".dialogOk"),
                dialogCancel = background.querySelector(".dialogCancel");
            inputEl.focus();
            document.addEventListener("focus", document_focus, true); // Перехват погружения
            document.addEventListener("keydown", document_keydown, true); // Перехват погружения
            // События самого диалога
            inputEl.addEventListener("keydown", inputEl_keydown); 
            dialogOk.addEventListener("click", btn_click);
            dialogCancel.addEventListener("click", btn_click);
 
            function document_focus(event) {
                let t = event.target;
                // console.log("focus", t); // Тестирование
                if (!background.contains(t)) {
                    event.stopPropagation();
                    inputEl.focus();
                }
            }
            function document_keydown(event) {
                // console.log(event); // Тестирование
                if (event.key === "Escape") {
                    event.stopPropagation();
                    dialogCancel.click();
                }
            }
            function inputEl_keydown(event) {
                // console.log("inputEl"); // Тестирование
                if (event.key === "Enter") {
                    event.preventDefault();
                    dialogOk.click();
                }
            }
            function btn_click() {
                background.remove();
                document.removeEventListener("focus", document_focus, true); // С перехвата погружения 
                document.removeEventListener("keydown", document_keydown, true); // С перехвата погружения
                if (callback && typeof callback === "function")
                    callback(this.classList.contains("dialogOk") ? inputEl.value : null);
            }
        }
 
        myPrompt(
            "Prompt!",
            `<div>This is a simple prompt.</div>
<div>with some <b>HTML</b> <i>contents</i></div>`,
            value => { alert("Выбрано: " + value); }
        );
    </script>
</body>
</html>

Соответственно, обработку Escape можно добавить и в решение задач Alert, Confirm.

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

@AsuraEva 0 / 0 / 0 Регистрация: 09.08.2021 Сообщений: 37

	Как написать функцию которая будет заменять prompt? 03.09.2021, 17:05. Показов 3270. Ответов 4 Метки html, javascipt, javascr для начинающих (Все метки) При вызове этой функции должно показываться модальное окно с заголовком и текстом, а также с полем для ввода текста (input type="text"). А также две кнопки - OK и Cancel. Указания: Сделайте возможность передать один коллбэк. При нажатии на кнопку OK - нужно вызывать коллбэк, куда передается значение, введенное в input. При нажатии на кнопку Cancel - нужно вызвать коллбэк, куда передается значение null. Также отрефакторите код, чтобы было как можно меньше дублирования с предыдущими функциями. 0

Опции темы

Как написать функцию которая будет заменять prompt?

Решение