2

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?

BrownChiLD
  • 3,545
  • 9
  • 43
  • 61

3 Answers3

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.

Jeff Walker Code Ranger
  • 4,634
  • 1
  • 43
  • 62
1

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();
});
Shiny
  • 62
  • 2
0

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

Paco G
  • 391
  • 1
  • 3
  • 15