一旦出现，如何在Bootstrap模式中为特定字段设置焦点

我已经看到了一些有关引导程序模式的问题，但是没有一个完全像这样，所以我继续。

我有一个模态，我这样称呼onclick ...

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

尝试这个

这是旧的DEMO：

编辑：（
这是使用Bootstrap 3和jQuery 1.8.3的有效演示版）

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

或将焦点放在第一个可见的输入上，如下所示：

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

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

我在布局中使用它来捕获所有模态，并专注于第一个输入

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

I had the same problem with bootstrap 3, focus when i click the link, but not when trigger the event with javascript.
The solution:

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

Probably it´s something about the animation!

我遇到了“ shown.bs.modal”事件的问题。这是我的完美解决方案。

而是简单的on（）：

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

将on（）与委托元素一起使用：

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

似乎是因为启用了模态动画（fade在对话框的类中），调用后.modal('show')，该对话框不会立即可见，因此此时无法获得焦点。

我可以想到两种解决此问题的方法：

fade从类中移除，因此调用后，对话框立即可见.modal('show')。您可以查看http://codebins.com/bin/4ldqp7x/4进行演示。（对不起，@ keyur，我错误地将其编辑并另存为示例的新版本）
像@keyur所写的那样focus()在shown事件中调用。

我创建了一种动态方式来自动调用每个事件。专注于某个领域非常理想，因为它只调用一次事件，使用后将其删除。

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

因此，您可以使用相同的模式来加载所需的内容，而不必担心每次都会发生remove事件。

我对bootstrap 3遇到了同样的问题，并像这样解决了：

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

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

Bootstrap添加了一个加载事件。

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

捕获模态上的“ loaded.bs.modal”事件

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

}）

一个更干净，更模块化的解决方案可能是：

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

希望有帮助。

本文地址：http://javascript.askforanswer.com/yidanchuxianruhezaibootstrapmoshizhongweitedingziduanshezhijiaodian.html
文章标签：javascript , modal-dialog , twitter-bootstrap
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载