Ввод в бутбокс потерял фокус на клавише alt

В настоящее время я пытаюсь создать страницу настроек пользователя. На этой странице пользователь может изменить свой адрес электронной почты, нажав кнопку, открывающую всплывающее окно. В этом всплывающем окне он должен иметь возможность ввести свой новый адрес электронной почты. Проблема в том, что когда я нажимаю клавишу Alt, я теряю фокус ввода. Итак... Я не могу ввести адрес электронной почты, потому что не могу добавить "@" (да, я француз и у меня клавиатура AZERTY :/).

Мой вопрос: что я могу сделать, чтобы не потерять фокус?

Я разрабатываю свое веб-приложение в Meteor и Jade. Вот мой шаблон всплывающего окна:

template(name="change_mail")
  table.table.table-responsive.large-table
    tbody
      tr
        td {{_ "current_mail" }} :
        td.table-text#old-mail
      tr
        td {{_ "new_mail" }} :
        td
          input.black#new-mail(type="text" name="mail")

И мой контроллер:

Template.change_mail.rendered = function ()
{
  document.getElementById('new-mail').focus(); // Don't work 
}

"click #change_mail": function (event, template)
{
    event.preventDefault();
    var user = Meteor.user();
    bootbox.dialog(
    {
        title : t('change_mail'),
        message : "<div id='dialogNode'></div>",
        className : "info-popup",
        buttons : 
        {
            cancel :
            {
                label : t('back'),
                className : "btn-default btn-lg"
            },
            success : 
            {
                label : t('update'),
                className : "btn-info btn-lg",
                callback : function ()
                {
                    var mail = $("#new-mail").val();
                    if (mail === "")
                    {
                        return;
                    }
                    else
                    {
                        Meteor.call('updateMail', user._id, mail);
                        displayPopup(t("success"), t("success_change_mail"), t("ok"), "btn-success btn-lg", "success-popup");
                    }
                }
            }
        }
    });
    Blaze.render(Template.change_mail, $("#dialogNode")[0]);
    $("#old-mail").text(user.emails[0].address);
},

EDIT: я пытался изменить библиотеку, используя Magnific Popup. Я получаю фокус, когда всплывающее окно открыто, но сразу же потерял его. Во всяком случае, я потерял фокус на обоих, когда нажал клавишу Alt. Я не понимаю, почему.


person c.censier    schedule 17.12.2014    source источник


Ответы (2)


Это потому, что вы используете Ubuntu. В Ubuntu клавиша alt является системной клавишей, которая привязана к «введите команду».

Ссылка: https://github.com/Guake/guake/issues/352

Так что, если ваши клиенты не используют клавиатуру Ubuntu + Azerty, это нормально.

В качестве грязного исправления вы можете поймать событие при нажатии клавиши, и если эта клавиша нажата, просто принудительно установите фокус с помощью

document.getElementById('email').focus();
person LastMove    schedule 12.01.2015

Попробуйте использовать функцию focus() JS DOM.

Может работать, если фокус установлен только на текстовом поле во всплывающем окне.

e.g.:

document.getElementById('email').focus();
person herzDev    schedule 17.12.2014
comment
Куда мне добавить эту строку? - person c.censier; 17.12.2014
comment
при вызове всплывающего диалогового окна электронной почты. фокус должен перейти на вводимый текст. как будто вы посещаете Google, и фокус курсора переходит на панель поиска в середине веб-сайта. В этом случае вы можете ввести все, что хотите (включая AltGr), без вызова какой-либо функции браузера. - person herzDev; 17.12.2014
comment
дополняю @herzDev: Template.change_mail.rendered = function () { document.getElementById('email').focus(); }; - person avenda; 20.12.2014
comment
Спасибо за помощь, но... это ничего не меняет. Я не получаю фокус при отображении шаблона, что... довольно странно. В любом случае, я не хочу фокусироваться на вводе при его рендеринге, я хотел бы понять, почему я потерял фокус, нажав клавишу alt, и как я могу предотвратить такое поведение. - person c.censier; 22.12.2014