Взаимодействие с пользователем: alert, prompt, confirm
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/alert-prompt-confirm.
В этом разделе мы рассмотрим базовые UI операции: alert , prompt и confirm , которые позволяют работать с данными, полученными от пользователя.
alert
alert выводит на экран окно с сообщением и приостанавливает выполнение скрипта, пока пользователь не нажмёт «ОК».
Окно сообщения, которое выводится, является модальным окном. Слово «модальное» означает, что посетитель не может взаимодействовать со страницей, нажимать другие кнопки и т.п., пока не разберётся с окном. В данном случае – пока не нажмёт на «OK».
prompt
Функция prompt принимает два аргумента:
result = prompt(title, default);Она выводит модальное окно с заголовком title , полем для ввода текста, заполненным строкой по умолчанию default и кнопками OK/CANCEL.
Пользователь должен либо что-то ввести и нажать OK, либо отменить ввод кликом на CANCEL или нажатием Esc на клавиатуре.
Вызов prompt возвращает то, что ввёл посетитель – строку или специальное значение null , если ввод отменён.
Единственный браузер, который не возвращает null при отмене ввода – это Safari. При отсутствии ввода он возвращает пустую строку. Предположительно, это ошибка в браузере.
Если нам важен этот браузер, то пустую строку нужно обрабатывать точно так же, как и null , т.е. считать отменой ввода.
Как и в случае с alert , окно prompt модальное.
var years = prompt('Сколько вам лет?', 100); alert('Вам ' + years + ' лет!')Второй параметр может отсутствовать. Однако при этом IE вставит в диалог значение по умолчанию «undefined» .
Запустите этот код в IE, чтобы понять о чём речь:
Поэтому рекомендуется всегда указывать второй аргумент:
confirm
confirm выводит окно с вопросом question с двумя кнопками: OK и CANCEL.
Результатом будет true при нажатии OK и false – при CANCEL( Esc ).
var isAdmin = confirm("Вы - администратор?"); alert( isAdmin );Особенности встроенных функций
Конкретное место, где выводится модальное окно с вопросом – обычно это центр браузера, и внешний вид окна выбирает браузер. Разработчик не может на это влиять.
С одной стороны – это недостаток, так как нельзя вывести окно в своём, особо красивом, дизайне.
С другой стороны, преимущество этих функций по сравнению с другими, более сложными методами взаимодействия, которые мы изучим в дальнейшем – как раз в том, что они очень просты.
Это самый простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда простота важна, а всякие «красивости» особой роли не играют.
Резюме
- alert выводит сообщение.
- prompt выводит сообщение и ждёт, пока пользователь введёт текст, а затем возвращает введённое значение или null , если ввод отменён (CANCEL/ Esc ).
- confirm выводит сообщение и ждёт, пока пользователь нажмёт «OK» или «CANCEL» и возвращает true/false .
Альтернатива prompt () в JavaScript
Вот сценарий. У меня есть код JavaScript, который будет генерироваться «на лету». Таким образом, вместо использования prompt() которое открывает окно ввода для чтения userinput, я создал пользовательский элемент. Потому что я могу создать собственный пользовательский ввод, а не использовать обычный. Таким образом, функция отображения пользовательского ввода-бокса — это что-то вроде show_input() И этот код, сгенерированный «на лету», выполняется в конце с помощью eval() . Поэтому в коде после вызова этой функции show_input() программа должна ждать, пока пользователь show_input() значение и нажмет кнопку (кнопка в моей пользовательской форме ввода). И было бы несколько вызовов этой функции в сгенерированном коде. Я не уверен, как найти решение этого. То есть, чтобы заставить его вести себя точно так же, как prompt() останавливает полное выполнение кода. То, что я пробовал, — это использовать булевский флаг, который будет установлен, когда пользователь вводит значение и нажимает кнопку в нашем пользовательском поле ввода. Итак, когда show_input() мой show_input() , он отображает окно пользовательского ввода, а затем переходит в бесконечный цикл, который останавливается только тогда, когда этот булев флаг установлен. Но это замораживает веб-страницу, не реагируя на нее. Итак, это не отличное решение. Есть ли способ имитировать функциональность работы функции prompt() . Я имею в виду, приостановить всю страницу, пока пользователь не нажмет кнопку? Функция setTimeout() не была бы хорошим выбором в моем случае. Потому что причина в том, что мой код будет выглядеть примерно так:
statement1; statement2; show_input(); //call the function to show my custom inputbox statement3; show_input(); statement4; statement5; // etc. Таким образом, после statement2 вызов функции предназначен для отображения пользовательского поля ввода, запрашивающего у пользователя ввод значения и нажатия кнопки. Только после нажатия этой кнопки он должен перейти к statement3 . До этого времени он должен ждать, пока пользователь нажмет кнопку в моем пользовательском поле ввода. Я использую jQuery, и кнопка добавила к нему событие click. Вышеприведенный код, сгенерированный во время выполнения, выполняется с использованием eval() Любые идеи будут высоко оценены. спасибо
использовать события. это означает, что вам придется сделать свой код менее последовательным. например, после вызова show_input() вас не должно быть больше кода «ожидание». Ваш код должен завершиться, и как только пользователь запустит событие (кнопка ОК), вы выполните другую функцию.
@ShadowWizard: очень жаль это. Сделал опечатку. Это встроенная функция prompt() которой я пытаюсь создать альтернативу. VB6, VB.Net, PHP, Javascript и все остальное заставили меня биться головой. :П
@TheBronx: Спасибо. Но я сомневаюсь, как заставить это работать. Я имею в виду, сгенерированный код во время выполнения не будет таким же. И этот код будет выполняться, когда пользователь нажимает кнопку.
@Teemu: Это лучше, чем обычное prompt() . Мы можем изменить внешний вид тоже. Но единственная проблема заключается в том, что новый открытый модальный диалог не отображается модально на текущей странице. Если бы он отображался как поле с prompt() , было бы лучше! Я имею в виду, это должно быть показано модально на родительской вызывающей странице (т.е. родительская вкладка / окно браузера).
@ShadowWizard Не настоящие модалы, пожалуйста, проверьте этот jsFiddle . Вы также можете прочитать некоторые из этих сообщений на SO.
@ShadowWizard: ShadowWizard: Нет, это не поможет. Попробуйте повторить значение до и после вызова этой формы. Оба значения будут напечатаны сначала! Это не похоже на паузу в сценарии. Это просто обратный вызов при нажатии кнопки!
@AkhileshBChandran В Chrome возникли некоторые трудности (говорят, что открытый диалог не очень модален в Chrome). Другие браузеры работают нормально с showModalDialog() , т.е. скрипты действительно ждут ответа от модального диалога. Я эмулировал модальные окна в HTA с ActiveX, но это, вероятно, не решение в вашем случае.
@ShadowWizard: Кажется, есть некоторые изменения или что-то доступное. Давайте попробуем копать больше. 🙂
Альтернатива prompt () в JavaScript
Вот сценарий. У меня есть некоторый код JavaScript, который будет создан на лету. Итак, вместо использования prompt() , который открывает поле ввода для чтения ввода пользователя, я создал пользовательский элемент. Потому что я могу стилизовать свой пользовательский ввод вместо того, чтобы использовать обычный.
Итак, функция для отображения пользовательского поля ввода выглядит примерно так: show_input()
И этот код, сгенерированный на лету, выполняется в конце с помощью eval() . Таким образом, в коде после вызова этой функции show_input() программа должна ждать, пока пользователь не введет значение и не нажмет кнопку (кнопка в моей пользовательской форме ввода). И было бы больше чем один вызов этой функции в сгенерированном коде.
Я не уверен, как найти решение для этого. То есть чтобы заставить его вести себя так же, как prompt() , останавливая все выполнение кода.
Я попробовал использовать логический флаг, который будет установлен, когда пользователь введет значение и нажмет кнопку в нашем поле ввода. Таким образом, когда вызывается my show_input() , он показывает настраиваемое поле ввода и затем входит в бесконечный цикл, который останавливается только тогда, когда установлен этот логический флаг. Но это останавливает веб-страницу, делая ее не отвечающей. Так что это не очень хорошее решение.
Есть ли способ имитировать функциональность работы функции prompt() . Я имею в виду, приостановить всю страницу, пока пользователь не нажмет кнопку?
Функция setTimeout() не будет хорошим выбором в моем случае. Потому что причина в том, что мой сгенерированный код будет выглядеть примерно так:
statement1; statement2; show_input(); //call the function to show my custom inputbox statement3; show_input(); statement4; statement5; // etc. Итак, после statement2 вызов функции предназначен для отображения настраиваемого поля ввода, в котором пользователь должен ввести значение и нажать кнопку. Только после нажатия этой кнопки она должна перейти к statement3 . До этого времени пользователь должен ждать нажатия кнопки в моем поле ввода.
Я использую jQuery, и к кнопке добавлено событие click.
Приведенный выше код, сгенерированный во время выполнения, выполняется с помощью eval()
Любые идеи будут высоко оценены. Спасибо
Замена стандартного alert, prompt, confirm. Стилизация alert
Половина программистов использует для уведомлений пользователям стандартные всплывайки типа alert. Их неоспоримым преимуществом является простота вывода и не затейливость кода.
Но минусом — отсутствие возможности хоть как-то менять внешний вид. Более того, в разных браузерах такие «всплывайки» выглядят по разному. Также в alert нельзя вставлять html теги — например, ссылки или картинки.
Чтобы исправить данную ситуацию, предлагаю рассмотреть скрипт smoke-pure.js, который решит все эти проблемы.
Для его работы не нужна библиотека jQuery, а это огромный плюс. Достаточно подключить на вашем сайте всего 2 файла smoke-pure.css и smoke-pure.js .
Этот скрипт заменяет стандартный alert, prompt, confirm на свои с возможностью вставки html кода прямо внутрь alert-a. Также имеет множество настроек в smoke-pure.js и может вызывать функции в зависимости от нажатия кнопок.
Для создания обычного alert-a используйте код:
smoke.alert («Супер всплывайка
с html тегами»);
Подтверждение действия
smoke.confirm («Вы действительно хотите удалить файл?», function (result) if (result === false) return; //Выбрали отмена
smoke.alert («Файл был удален!», function (result) )
>)
Просьба ввести что-то
smoke.prompt («Введите ваше имя», function (result) if (result === false) return; //Выбрали отмена
smoke.alert («Вы ввели \»» + result + «\».»);
>)
Как видите код очень простой и работает сразу для всех 3-х видов окон JavaScript. Стилизовать всплывайку вы можете в файле smoke-pure.css — например, поменять цвета и шрифты, чтобы она больше соответствовала вашему стилю. А поменять параметры в файле smoke-pure.js — например, чтобы изменить названия кнопок или задать события.