Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.03.2017, 11:53
Новичок на форуме
Отправить личное сообщение для niki Посмотреть профиль Найти все сообщения от niki
 
Регистрация: 11.03.2017
Сообщений: 3

Не открывается диалог при нажатии ESC
Добрый день!

В целом задача выглядит таким образом: В текстовое поле вводится значение, если пользователь жмет ENTER, то значение сохраняется. Если пользователь жмет ESC, то в случае, если текстовое поле оказалось пустым - мы просто ничего не делаем, если же там было какое-то значение, то необходимо спросить у пользователя, надо ли сохранить введенное значение

У меня возникла следующая проблема: Есть текстовое поле, на которое навешививается обработчик события onkeypress.

input.onkeydown = function () {
        if (event.keyCode == 13) {
            //save value
        } else if (event.keyCode == 27) {
            //input.blur();
            let dialog = createYesDoDialog("Добавить домен " + input.value + "?",
                function () {tryToSaveNewDomen(input)},
                function () {initDomens()});
            dialog.showModal();
        }
    };


Функция createYesNoDialog() инициализирует диалог.

function createYesDoDialog(msg, onYesClick, onNoClick) {
    let dialog = document.getElementById("yesNoDialog");
    document.getElementById("msgYND").innerHTML = msg;
    document.getElementById("yesBtnYND").onclick = function () {
        onYesClick();
        dialog.close();
    };
    document.getElementById("noBtnYND").onclick = function () {
        onNoClick();
        dialog.close();
    };
    dialog.onkeydown = function () {
        onNoClick();
        dialog.close();
    };
    return dialog;
}


Насколько я понимаю, проблема возникает из-за нажатия на ESC, т.е. диалог закрывается именно из-за этого нажатия. Если я сменю в условии 27 (ESC) на, например 68 (d) и если я нажму d при вводе, то диалог появится.

Как мне предотвратить закрытие диалога в ситуации, когда я нажимаю на ESC в поле ввода?
Ответить с цитированием
  #2 (permalink)  
Старый 11.03.2017, 15:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

niki,
как устроен сам dialog, dialog.close();dialog.showModal();?
Ответить с цитированием
  #3 (permalink)  
Старый 11.03.2017, 15:37
Новичок на форуме
Отправить личное сообщение для niki Посмотреть профиль Найти все сообщения от niki
 
Регистрация: 11.03.2017
Сообщений: 3

<dialog id="yesNoDialog">
            <h5 id="msgYND" class="light-blue-text">MSG:</h5>
            <div class="row right">
                <div class="col">
                    <button id="yesBtnYND" class="btn waves-effect waves-light light-blue lighten-1">Да</button>
                </div>

                <div class="col">
                    <button id="noBtnYND" class="btn waves-effect waves-light light-blue lighten-1">Нет</button>
                </div>
            </div>
        </dialog>


Использую material design.

Что означает как устроен сам dialog, dialog.close(), dialog.showModal()?
Ответить с цитированием
  #4 (permalink)  
Старый 11.03.2017, 15:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

niki,
может так?
input.onkeydown = function (event) {
        if (event.keyCode == 13) {
            //save value
        } else if (event.keyCode == 27) {
             event.stopPropagation();
            //input.blur();
            let dialog = createYesDoDialog("Добавить домен " + input.value + "?",
                function () {tryToSaveNewDomen(input)},
                function () {initDomens()});
            dialog.showModal();
        }
    };
Ответить с цитированием
  #5 (permalink)  
Старый 12.03.2017, 08:30
Новичок на форуме
Отправить личное сообщение для niki Посмотреть профиль Найти все сообщения от niki
 
Регистрация: 11.03.2017
Сообщений: 3

Нет, не помогло.
Прочитал, что событие пробрасывается на все родительские элементы и дочерние. Диалог скорее всего является дочерним объектом, поэтому он так же отлавливает событие нажатие клавиши. Диалог при нажатии на ESC закрывается.

Получается есть два варианта:
1. Отменить пробросс события дальше.
2. Запретить закрываться диалогу при нажатии на ESC.

Может быть вы знаете, как реализовать что-то одно из этого?
Ответить с цитированием
  #6 (permalink)  
Старый 12.03.2017, 08:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,789

niki,
попробуйте заменить
dialog.showModal();
на
window.setTimeout(dialog.showModal,0)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 15:08
Присваивание класса при нажатии на ссылку skorpeeon Элементы интерфейса 10 25.07.2013 19:07
При нажатии на ссылку раскрываются все div anonimous jQuery 1 09.08.2012 13:49
Блок должен перемещаться из одной точки в другую, а при повторном нажатии обратно Ser12345678 jQuery 2 17.07.2012 11:18
SyntaxHighlighter подсветка при нажатии faraday Общие вопросы Javascript 3 31.03.2012 22:43