javascript - 在 Twitter Bootstrap 模式对话框中关注文本字段

Question

我需要在 Twitter Bootstrap 模式对话框中获得文本字段的焦点。我已经尝试过 focus() 方法。

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

所以，这里有一些建议。在 Bootstrap 3.x 中，有一个由 modal.shown 事件触发的函数，$('#myModal').on('shown.bs.modal', funciton() {...} ) 用于执行您的 initialize() 函数正在执行的操作。要解决 focus() 的问题，您必须将以下行添加到您的代码中:

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

问题是输入在 DOM 中没有完全准备好，因此您必须等待它加载并准备好，然后再尝试操作它。 Here是关于 .ready() 函数的更多文档。

这是 DEMO