Как написать функцию которая будет заменять 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.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

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

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

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

Решение