一旦出现，如何设置Bootstrap模式中特定字段的焦点
我已经看到了一些关于bootstrap模态的问题，但是没有一个完全像这样，所以我会继续。
我有一个模式，我打电话像这样…
$(".modal-link").click(function(event){ $("#modal-content").modal('show'); }); 这工作正常，但是当我显示模式，我想专注于第一个input元素…可能情况下，第一个input元素的ID为#photo_name。
所以我试了
$(".modal-link").click(function(event){ $("#modal-content").modal('show'); $("input#photo_name").focus(); });
但是这没有用。 最后，我尝试绑定到“显示”事件，但即使如此，input不会集中。 最后只是为了testing，因为我有一个suspiscion这是关于js的加载顺序，我把一个setTimeout只是为了看看我是否延迟一秒，焦点工作，是的，它的工作！ 但是这个方法显然是废话。 有没有使用setTimeout有如下效果的方法？
$("#modal-content").on('show', function(event){ window.setTimeout(function(){ $(event.currentTarget).find('input#photo_name').first().focus() }, 0500); });
尝试这个
这是旧的DEMO ：
编辑:(这是一个工作与引导3和jQuery 1.8.3 DEMO ）
$(document).ready(function() { $('#modal-content').modal('show'); $('#modal-content').on('shown', function() { $("#txtname").focus(); }) });
启动引导程序3需要使用shown.bs.modal事件：
$('#modal-content').on('shown.bs.modal', function() { $("#txtname").focus(); })
只是想说Bootstrap 3处理这个有点不同。 事件名称是“shown.bs.modal”。
$('#themodal').on('shown.bs.modal', function () { $("#txtname").focus(); });
或者把焦点放在第一个可见的input上，如下所示：
.modal('show').on('shown.bs.modal', function () { $('input:visible:first').focus(); })
我正在使用这个在我的布局捕捉所有的模态，并专注于第一个input
$('.modal').on('shown', function() { $(this).find('input').focus(); });
我有与引导3相同的问题，重点是当我点击链接，但不是当用JavaScript触发事件。 解决scheme：
$('#myModal').on('shown.bs.modal', function () { setTimeout(function(){ $('#inputId').focus(); }, 100); });
可能是关于animation的东西！
我有问题赶上“shown.bs.modal”事件..这是我的解决scheme，完美的工作..
（）上简单：
$('#modal').on 'shown.bs.modal', ->
在委托元素上使用（）：
$('body').on 'shown.bs.modal', '#modal', ->
看起来是因为启用了模态animation（在对话框的类中fade ），在调用.modal('show') ，对话框不能立即显示，所以此时无法获得焦点。
我可以想出两个办法来解决这个问题：
- 从类中删除
fade，所以在调用.modal('show')之后立即可见对话框。 你可以看http://codebins.com/bin/4ldqp7x/4演示。; （对不起@keyur，我错误地编辑并保存为您的示例的新版本） - 在
shown事件中调用focus()，比如@keyur写的。
我创build了一个dynamic的方式来自动调用每个事件。 完美地集中一个领域，因为它只需要调用一次，在使用后将其删除。
function modalEvents() { var modal = $('#modal'); var events = ['show', 'shown', 'hide', 'hidden']; $(events).each(function (index, event) { modal.on(event + '.bs.modal', function (e) { var callback = modal.data(event + '-callback'); if (typeof callback != 'undefined') { callback.call(); modal.removeData(event + '-callback'); } }); }); }
你只需要在文件准备好的时候调用modalEvents() 。
使用：
$('#modal').data('show-callback', function() { $("input#photo_name").focus(); });
所以，你可以使用相同的模式来加载你想要的，而不用担心每次删除事件。
我有bootstrap 3相同的问题，并解决这样的问题：
$('#myModal').on('shown.bs.modal', function (e) { $(this).find('input[type=text]:visible:first').focus(); }) $('#myModal').modal('show').trigger('shown');
一点清洁和更模块化的解决scheme可能是：
$(document).ready(function(){ $('.modal').success(function() { $('input:text:visible:first').focus(); }); });
或者用你的ID作为例子：
$(document).ready(function(){ $('#modal-content').modal('show').success(function() { $('input:text:visible:first').focus(); }); });
希望有帮助..
