Bootbox输入框失去焦点问题在按下Alt键时出现。

Question

我目前正在尝试创建一个用户设置页面。在该页面上，用户可以通过按下打开弹出窗口的按钮来更改他的电子邮件地址。在此弹出窗口中，他应该能够输入新的电子邮件地址。问题是，当我按下Alt键时，输入框会失去焦点。因此，我无法输入任何电子邮件地址，因为我无法添加“@”符号（是的，我是法国人，我有一个AZERTY键盘 :/）。我的问题是：我该怎么做才不会失去焦点？我在Meteor和Jade中开发我的Web应用程序。这是我的弹出窗口模板：

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);
},

编辑: 我试图更换库，使用Magnific Popup。弹出窗口打开时我能够获得焦点，但是我立即失去了焦点。 无论如何，当我按下Alt键时，两者都失去了焦点。我不明白为什么。

- c.censier

Answer 1

因为您正在使用Ubuntu。在Ubuntu上，Alt键是一个系统键，绑定到“键入命令”。

Reference: https://github.com/Guake/guake/issues/352

如果您的客户没有使用Ubuntu + Azerty键盘，那就没问题了。

作为一种临时解决方法，您可以在按下某个键时捕获事件，并且如果该键是alt键，则强制使用以下内容进行聚焦：

document.getElementById('email').focus();

- LastMove

Answer 2

尝试使用JS DOM的focus()函数。

如果只在弹出窗口的文本字段上设置焦点，可能会起作用。

e.g.:

document.getElementById('email').focus();

- herzDev

---

我应该在哪里添加这行代码？ - c.censier

当您调用电子邮件弹出对话框时，焦点应该进入输入文本。就像您访问谷歌并且光标焦点转到网站中间的搜索栏一样。在这种情况下，您可以输入任何内容（包括AltGr），而无需调用任何浏览器功能。 - herzDev

补充@herzDev： Template.change_mail.rendered = function () { document.getElementById('email').focus(); }; - avenda

谢谢你的帮助，但是...它并没有改变什么。当模板被渲染时，我无法获得焦点，这很奇怪。无论如何，我不想在输入框被渲染时获得焦点，我想知道为什么按下“alt”键会失去焦点，以及如何防止这种行为发生。 - c.censier