一旦出现,如何在Bootstrap模态中设置特定字段的焦点

Question

我已经看过几个关于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);
  });

Answer 1

试试这个

这是旧的DEMO:

编辑:( 这是一个工作DEMO与Bootstrap 3和jQuery 1.8.3)

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

启动bootstrap 3需要使用shown.bs.modal事件:

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

Answer 2

只想说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

Answer 3

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

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

Answer 4

我遇到了与bootstrap 3相同的问题,当我点击链接时焦点,但是当用javascript触发事件时没有.解决方案:

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

可能是关于动画的东西!

Answer 5

我有问题赶上"shown.bs.modal"事件..这是我的解决方案,工作完美..

相反简单的on():

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

在on()上使用委托元素:

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

Answer 6

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

我可以想出两种方法来解决这个问题:

1. fade从类中删除,因此调用后对话框立即可见.modal('show').你可以看http://codebins.com/bin/4ldqp7x/4进行演示.(抱歉@keyur,我错误地编辑并保存为您的示例的新版本)
2. 调用focus()在shown事件像什么@keyur写道.