在twitter bootstrap模态对话框中关注文本字段

Question

I need to have the focus for textfield in a twitter bootstrap modal dialog.I have tried the focus() method.

DEMO

$('#openBtn').click(function(){
    $('#myModal').modal({show:true});
  initialize();
});
function initialize(){

    $('#my').val('');/*empty the textfield for each time
    dialog is called */
   $('#my').focus();//to get focus
}

HTML:

<a href="#" class="btn btn-default" id="openBtn">Open modal</a>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Modal header</h3>
    </div>
    <div class="modal-body">

        <input type="text" id="my" value="">
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
    </div>
    </div>
</div>
</div>

Answer 1

So, here are a few pointers. With Bootstrap 3.x there is a function that is triggered by the modal.shown event called thusly, $('#myModal').on('shown.bs.modal', funciton() {...}) which is used to do what your initialize() function is doing. To fix the issue with focus() you have to add the following line to your code:

$("#my").ready(function() {...})

The problem is that the input isn't fully ready in the DOM, so you must wait for it to be loaded and ready before you try manipulating it. Here is more documentation on the .ready() function.

Here is the DEMO

Answer 2

Code Snippet for showing the dialog

$('#openBtn').click(function () {
    $('#myModal').modal({show:true});
    $('#my').val('');//empting the textfield so that dialog does not retain previous state
}); 

not using the ready function,using only modal shown event

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

DEMO