我加载了一个动态 bootstrap 模式,它包含很少的文本输入.我面临的问题是,我希望光标集中在这个模式中的第一个输入上,而这在默认情况下不会发生
$('#modalContainer').on('show', function () {
$('input:text:visible:first').focus();
});
但现在它只关注输入中的一小部分,然后自动消失,为什么会发生这种情况,以及如何解决?
我加载了一个动态 bootstrap 模式,它包含很少的文本输入.我面临的问题是,我希望光标集中在这个模式中的第一个输入上,而这在默认情况下不会发生
$('#modalContainer').on('show', function () {
$('input:text:visible:first').focus();
});
但现在它只关注输入中的一小部分,然后自动消失,为什么会发生这种情况,以及如何解决?
@scumah has the answer for you: Twitter bootstrap - Focus on textarea inside a modal on click
对于Bootstrap 2
modal.$el.on('shown', function () {
$('input:text:visible:first', this).focus();
});
更新:适用于Bootstrap 3
$('#myModal').on('shown.bs.modal', function () {
$('#textareaID').focus();
})
========== Update ======
In response to a question, you can use this with multiple modals on the same page if you specify different data-targets, rename your modals IDs to match and update the IDs of the form input fields, and finally update your JS to match these new IDs:
see 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();
})