Bootbox input lost focus on alt key

Question

I'm currently trying to make a user settings page. On this page, the user can change his email by pressing a button that open a popup. On this popup, he should be able to type his new email. The problem is, when I press the Alt key, I lose the focus of the input. So... I can't type any email address because I can't add an "@" (Yes, I'm French and I have an AZERTY keyboard :/).

My question is : what can I do to not lose the focus ?

I develop my web app in Meteor and Jade. Here is my popup template :

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")

And my controller :

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 : I tried to change the library, using Magnific Popup. I get focus when the popup is open but I lost it immediately. Anyway, I lost focus on both when I press Alt key. I don't understand why.

score 3 · Accepted Answer · answered Jan 12 '15 at 15:46

It's because you are using Ubuntu. On ubuntu the alt key is a system key that is binded to "type you command".

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

So if your customers are not using ubuntu + Azerty keyboard, it's fine.

As a dirty fix, you can catch an event when a key is pressed and if this key is alt, just force the focus with

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

score 0 · Answer 2 · answered Dec 17 '14 at 15:31

0

Try to use the JS DOM focus() function.

Could work if the focus is set only on the textfield in your popup.

e.g.:

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

answered Dec 17 '14 at 15:31

herzDev

13
3

Where do I have to add this line ? – c.censier Dec 17 '14 at 15:52
when you call the eMail pop up dialog. the focus should go into the input text. like you are visiting google and the cursor focus goes to the search bar in the middle of the website. In this case, you can input everything (including AltGr) you want without calling any browser function. – herzDev Dec 17 '14 at 19:14
complementing @herzDev: `Template.change_mail.rendered = function () { document.getElementById('email').focus(); };` – avenda Dec 19 '14 at 22:03
Thank you for your help but... it doesn't change anything. I don't get the focus when the template is rendered which is... pretty weird. Anyway, I don't want to get focus on the input when it's rendered, I'd like to understand why I lost focus by pressing the "alt" key and how I can prevent this behavior. – c.censier Dec 22 '14 at 08:16

Bootbox input lost focus on alt key

2 Answers2