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

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

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

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

Answer 1

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

Answer 2

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

 <input value="" autofocus> 

完美的作品。

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

Answer 3

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

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

Answer 4

通常的代码（下面） 不适用于我：

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

我find了解决办法 ：

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

在这里看到更多

Answer 5

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

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

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

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

Answer 6

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

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

Answer 7

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

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

Answer 8

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

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

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

Answer 9

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

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

Answer 10

第一步，您必须在表单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(); }); });