一旦某个特定字段出现，如何在 Bootstrap 模式下设置焦点

我看到了一些关于自举模态的问题，但没有一个像这样的，所以我继续。

我有一个模态，我调用点击喜欢这样..。

$(".modal-link").click(function(event){
$("#modal-content").modal('show');
});

这个工作很好，但是当我显示模态时，我想要关注第一个输入元素... ... 在可能的情况下，第一个输入元素的 id 为 # photo _ name。

所以我尽力了

   $(".modal-link").click(function(event){
$("#modal-content").modal('show');
$("input#photo_name").focus();
});

但这一切都无济于事。最后，我尝试绑定到‘ show’事件，但是即使这样，输入也不会聚焦。最后是测试，因为我怀疑这是关于 js 的加载顺序，我放了一个 setTimeout 只是为了看看我是否延迟了一秒，焦点是否工作，是的，它工作！但这种方法显然是垃圾。有没有什么方法可以在不使用 setTimeout 的情况下达到与下面相同的效果？

  $("#modal-content").on('show', function(event){
window.setTimeout(function(){
$(event.currentTarget).find('input#photo_name').first().focus()
}, 0500);
});
351943 次浏览
小开
最佳答案

试试这个

这是以前的 强 > DEMO:

编辑: (这是一个工作的 强 > DEMO，它具有 Bootstrap 3和 jQuery 1.8.3)

$(document).ready(function() {
$('#modal-content').modal('show');
$('#modal-content').on('shown', function() {
$("#txtname").focus();
})
});

启动 bootstrap 3需要使用 show.bs.mode 事件:

$('#modal-content').on('shown.bs.modal', function() {
$("#txtname").focus();
})
小开

这似乎是因为模态动画是启用(fade在类的对话框) ，调用 .modal('show')之后，对话框不是立即可见的，所以它不能得到焦点在这个时候。

我能想到两种方法来解决这个问题:

  1. 从类中删除 fade，这样在调用 .modal('show')之后对话框立即可见。你可以看到 http://codebins.com/bin/4ldqp7x/4的演示。(对不起@keyur，我错误地编辑并保存为示例的新版本)
  2. 像@keyur 写的那样，在 shown事件中调用 focus()。
小开

我在我的布局中使用这个来捕捉所有的模态，并将注意力集中在第一个输入上

  $('.modal').on('shown', function() {
$(this).find('input').focus();
});
小开

一个更简洁、更模块化的解决方案可能是:

$(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();
});
});

希望这能帮上忙。

小开

我只是想说 Bootstrap 3处理这个事件的方式有点不同，事件名是“ shown.bs.mode”。

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

或者像这样把焦点放在第一个可见的输入上:

.modal('show').on('shown.bs.modal', function ()
{
$('input:visible:first').focus();
})

Http://getbootstrap.com/javascript/#modals

小开

我在引导程序3上遇到了同样的问题，解决方法是这样的:

$('#myModal').on('shown.bs.modal', function (e) {
$(this).find('input[type=text]:visible:first').focus();
})


$('#myModal').modal('show').trigger('shown');
小开

我有同样的问题与引导3，焦点时，我点击链接，但没有触发事件与 javascript。 解决办法:

$('#myModal').on('shown.bs.modal', function () {
setTimeout(function(){
$('#inputId').focus();
}, 100);
});

可能和动画有关！

小开

我在捕捉“ show.bs.mode”事件时遇到了问题. . 这就是我的解决方案，非常完美。

取而代之的是() :

$('#modal').on 'shown.bs.modal', ->

在带有委托元素的情况下使用 on () :

$('body').on 'shown.bs.modal', '#modal', ->
小开

我已经创建了一个动态方法来自动调用每个事件。它非常适合聚焦一个字段，因为它只调用事件一次，并在使用后删除它。

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 添加了一个已加载的事件。

Https://getbootstrap.com/docs/3.3/javascript/#modals

捕获模式上的‘ loaded.bs.mode’事件

$('#mymodal').on('loaded.bs.modal', function(e) {
// do cool stuff here all day… no need to change bootstrap
})
小开

自举模态显示事件

$('#modal-content').on('show.bs.modal', function() {
$("#txtname").focus();

})


提交答案