我加载了一个动态引导模式，它包含很少的文本输入。我面临的问题是我希望光标专注于此模态中的第一个输入，默认情况下不会发生这种情况。
所以我写了这段代码来做到这一点：
$('#modalContainer').on('show', function () {
$('input:text:visible:first').focus();
});
但现在它专注于输入片刻然后自动消失，为什么会发生这种情况以及如何解决？
答案 0 :(得分：154)
@scumah为您解答：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();
})
==========更新======
在回答问题时，如果您指定了不同的数据目标，则可以在同一页面上使用多个模态，重命名您的模态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();
})
答案 1 :(得分：71)
我找到了最好的方法，没有jQuery。
<input value="" autofocus>
完美无缺。
这是一个html5属性。所有主流浏览器都支持 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
答案 2 :(得分：32)
David Taiaroa的答案是正确的，但不起作用，因为“淡入”模态的时间不会让你把注意力集中在输入上。你需要创建一个延迟：
$('#myModal').on('shown.bs.modal', function () {
...
setTimeout(function (){
$('#textareaID').focus();
}, 1000);
})
答案 3 :(得分：13)
The usual code (below) does not work for me:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
I found the solution:
$('body').on('shown.bs.modal', '#myModal', function () {
$('input:visible:enabled:first', this).focus();
})
答案 4 :(得分：8)
我得到了这个bootstrap在他们的页面上添加了以下信息：
由于HTML5如何定义其语义，因此自动聚焦HTML属性 对Bootstrap模态没有影响。要达到同样的效果，请使用 一些自定义JavaScript：
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
答案 5 :(得分：4)
我认为，假设使用jQuery，最正确的答案是整合本页所有答案的各个方面，以及使用Bootstrap传递的事件：
$(document).on('shown.bs.modal', function(e) {
$('input:visible:enabled:first', e.target).focus();
});
它还可以将$(document)更改为$('.modal')，或者为模式添加一个类，表明应该发生此焦点，例如$('.modal.focus-on-first-input')
答案 6 :(得分：4)
这是一个简单的代码，最适合所有具有任何输入字段的弹出窗口，并且可以将其聚焦
$(".modal").on('shown.bs.modal', function () {
$(this).find("input:visible:first").focus();
});
答案 7 :(得分：3)
试试这段代码，它可能适合你
$(this).find('input:text')[0].focus();
答案 8 :(得分：1)
首先，您必须在表单输入上设置autofocus属性。
<input name="full_name" autofocus/>
然后，在显示模态后，您必须添加声明以设置输入的自动对焦
试试这个代码：
$(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();
});
});
答案 9 :(得分：1)
使用自动对焦搜索正确的表单元素：
$('.modal').on('shown.bs.modal', function() {
$(this).find('[autofocus]').focus();
});
答案 10 :(得分：0)
如果你想只是自动对焦任何已打开的模态，你可以在这个模式或lib函数中放入一个重点放在第一个输入上的代码片段：
$('.modal').on('shown.bs.modal', function () {
$(this).find('input:first').focus();
})
答案 11 :(得分：0)
如果您正在寻找适合所有模态的代码段，并在打开的代码框中自动搜索第一个输入文本，则应使用以下代码：
$('.modal').on('shown.bs.modal', function () {
$(this).find( 'input:visible:first').focus();
});
如果您的模态是使用ajax加载的，请改用此方法：
$(document).on('shown.bs.modal', '.modal', function() {
$(this).find('input:visible:first').focus();
});
答案 12 :(得分：0)
这是最通用的解决方案
$('body').on('shown.bs.modal', '.modal', function () {
$(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
});
答案 13 :(得分：0)
尝试删除模式的tabIndex属性。 关闭输入/文本框后，将其设置回原来的状态。这样可以解决各个引导程序版本和不影响用户体验流的问题。
答案 14 :(得分：0)
根据Bootstrap 4文档：
由于HTML5如何定义其语义，因此自动对焦HTML属性 对Bootstrap模态无效。为了达到相同的效果，请使用 一些自定义JavaScript。
例如：
$('#idOfMyModal').on('shown.bs.modal', function () {
$('input:first').trigger('focus')
});
Link。
答案 15 :(得分：0)
使用 Bootstrap 4：
1/ 移除 如果你不删除“fade”类，输入将聚焦，但键盘不会在 iOS 上的 Safari 中显示 答案 16 :(得分：-1) 调用模态形式的是“#button”， “#mymodal”是模式形式， “＃myinput”是您想要获得焦点的输入$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
$(document).ready(function() {
$("#button").click(function() {
$('#mymodal').on('shown.bs.modal', function() {
$('#myinput').focus();
})
});
});