I can't seem to set the focus on Bootbox's textfield automatically.

here's my code: function setCode(myCode){

    bootbox.confirm("Enter your PIN: <input id='pin_code' type='password' name='pin_code'></input>", 
            function(result) {
                if(result)
                console.log($("#pin_code").val());
            });
        $("#pin_code").focus();
    };

Perhaps something about bootbox's code is getting in the way?

I can't seem to set the focus on Bootbox's textfield automatically.

here's my code: function setCode(myCode){

    bootbox.confirm("Enter your PIN: <input id='pin_code' type='password' name='pin_code'></input>", 
            function(result) {
                if(result)
                console.log($("#pin_code").val());
            });
        $("#pin_code").focus();
    };

Perhaps something about bootbox's code is getting in the way?

• javascript
• focus
• bootbox

Share Improve this question Follow asked Feb 9, 2014 at 9:33 BrownChiLDBrownChiLD 3,7331010 gold badges4747 silver badges6464 bronze badges 1

• 1 maybe you should accept correct answer... – Legionar Commented Oct 28, 2015 at 10:22

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You can register a shown event handler that sets the focus (as suggested by @Shiny). However, as of Bootstrap 3 and Bootbox v4.x.x, the shown event is namespaced and it is necessary to use the fully qualified name shown.bs.modal to register the event handler. So the code would be:

var box = bootbox.confirm("Enter your PIN: <input id='pin_code' type='password' name='pin_code'></input>", 
    function(result) {
        if(result)
        console.log($("#pin_code").val());
    });

box.on('shown.bs.modal',function(){
  $("#pin_code").focus();
});

Trying to set the focus as you were doesn't work because the dialog isn't visible immediately after the call to bootbox.confirm. Elements that aren't visible can't have focus.

You can try this code

var box = bootbox.confirm("Enter your PIN: <input id='pin_code' type='password' name='pin_code'></input>", 
        function(result) {
            if(result)
            console.log($("#pin_code").val());
        });
box.on('shown',function(){
    $("#pin_code").focus();
});

I know that this is old but check that if you're using Chrome, you don't have Dev Tools open.