如何在显示后将焦点设置为引导模式中的第一个文本输入

Question

我加载了一个动态引导模式,它包含很少的文本输入.我面临的问题是我希望光标专注于此模式中的第一个输入,默认情况下不会发生这种情况.
所以我写了这段代码来做到这一点:

$('#modalContainer').on('show', function () {
   $('input:text:visible:first').focus();
});

但现在它专注于输入片刻然后自动消失,为什么会发生这种情况以及如何解决？

Answer 1

@scumah有你的答案:Twitter bootstrap - 专注于点击模式内的textarea

对于Bootstrap 2

modal.$el.on('shown', function () {
$('input:text:visible:first', this).focus();
});  

更新:对于Bootstrap 3

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

==========更新======

在回答问题时,如果指定了不同的数据目标,可以在同一页面上使用多个模态,重命名模态ID以匹配并更新表单输入字段的ID,最后更新JS以匹配这些新的ID:
请参阅http://jsfiddle.net/panchroma/owtqhpzr/5/

HTML

...
<button ... data-target="#myModal1"> ... </button> 
... 
<!-- Modal 1 -->
<div class="modal fade" id="myModal1" ...>
... 

<div class="modal-body"> <textarea id="textareaID1" ...></textarea></div>

JS

$('#myModal1').on('shown.bs.modal', function() {
  $('#textareaID1').focus();
})

Answer 2

没有jQuery,我找到了最好的方法.

<input value="" autofocus>

工作得很好.

这是一个html5属性.所有主流浏览器均支持.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input

Answer 3

David Taiaroa的答案是正确的,但是不起作用,因为"淡入"模态的时间不会让你把注意力集中在输入上.你需要创建一个延迟:

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

})

Answer 4

通常的代码(见下文)不为我工作:

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

我找到了解决方案:

$('body').on('shown.bs.modal', '#myModal', function () {
    $('input:visible:enabled:first', this).focus();
})

在这里看到更多

Answer 5

我得到了bootstrap在他们的页面上添加了以下信息:

由于HTML5如何定义其语义,自动聚焦HTML属性对Bootstrap模式没有影响.要达到相同的效果,请使用一些自定义JavaScript:

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

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

Answer 6

这是简单的代码，它将最适合所有具有任何输入字段且将其集中的弹出窗口

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