Question

我需要在twitter bootstrap模式对话框中关注textfield。我尝试了focus（）方法。

$('#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，有一个函数由名为$('#myModal').on('shown.bs.modal', funciton() {...})的modal.shown事件触发，该事件用于执行initialize()函数正在执行的操作。要解决focus()的问题，您必须在代码中添加以下行：

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

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

以下是DEMO

Answer 2

用于显示对话框的代码段

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

未使用ready函数，仅使用模式显示的事件

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

<强> DEMO

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

2 个答案: