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

我加载了一个dynamic引导模式,它包含几个文本input。 我面临的问题是,我希望光标专注于此模式中的第一个input,并且这不是默认情况下发生的。
所以我写了这个代码来做到这一点:

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

但是现在它将注意力集中在input中一会儿然后自动消失,为什么会发生这种情况以及如何解决?

@scumah为你提供了答案: Twitter引导 – 关注单击模式内的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来匹配和更新表单input字段的ID,最后更新你的JS来匹配这些新的标识:
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(); }) 

我find了最好的方法来做到这一点,没有jQuery。

 <input value="" autofocus> 

完美的作品。

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

David Taiaroa的答案是正确的,但不起作用,因为“淡入”模式的时间不会让您专注于input。 您需要创build一个延迟:

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

通常的代码(下面) 不适用于我:

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

我find了解决办法

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

在这里看到更多

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

由于HTML5定义了其语义,自动对焦HTML属性在Bootstrap模式中没有任何作用。 要达到相同的效果,请使用一些自定义JavaScript:

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

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

试试这个代码,它可能适合你

 $(this).find('input:text')[0].focus(); 

这是一个简单的代码,将最好的工作在所有popup窗口有任何input字段与重点

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

假设使用jQuery,我认为最正确的答案是合并本页所有答案的各个方面,以及使用Bootstrap所传递的事件:

 $(document).on('shown.bs.modal', function(e) { $('input:visible:enabled:first', e.target).focus(); }); 

它也可以将$(document)改为$('.modal')或者将一个类添加到模式中,表示这个焦点应该发生,例如$('.modal.focus-on-first-input')

如果你想自动聚焦任何已经打开的模式,你可以放入模式或lib函数,这个代码片段将集中在第一个input:

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

第一步,您必须在表单input上设置autofocus属性。

 <input name="full_name" autofocus/> 

然后你必须添加声明来设置你的input自动对焦后,你的模态显示。
试试这个代码:

 $(document).on('ready', function(){ // Set modal form input to autofocus when autofocus attribute is set $('.modal').on('shown.bs.modal', function () { $(this).find($.attr('autofocus')).focus(); }); });