如何设置焦点，以第一个文本输入引导模式后显示

我加载了一个动态引导模式，它包含很少的文本输入。我面临的问题，我希望光标集中在这个模式的第一个输入，这是不会发生的默认情况。
所以我写了这段代码:

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

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

239245 次浏览
小开

试试这个代码，可能对你有用

$(this).find('input:text')[0].focus();
小开
最佳答案

@ scumah 为您解答: Bootstrap-点击模式中的 textarea

为了引导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();
})
小开

我找到了不使用 jQuery 的最佳方法。

<input value="" autofocus>

效果很好。

这是一个 html5属性，所有主流浏览器都支持。
Https://developer.mozilla.org/en-us/docs/web/html/element/input

小开

DavidTaiaroa 的回答是正确的，但是不起作用，因为“淡入”模式的时间不允许您将焦点放在输入上。你需要制造一个延迟:

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


})
小开

我让引导程序在他们的页面上添加了以下信息:

由于 HTML5定义其语义的方式，autofocus HTML 属性 在 Bootstrap 模态中没有效果。要达到同样的效果，请使用 一些定制的 JavaScript:

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

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

小开

通常的代码(如下) 没有为我工作:

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

我找到了 解决方案:

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

如果你只想自动聚焦任何打开的模态，你可以在你的模式或 lib 函数中放入这个片段，它将聚焦于第一个输入:

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

这是一个简单的代码，它可以在所有弹出窗口中的任何输入字段中起到最好的效果

$(".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')

小开

第一步，必须在表单输入上设置 autofocus属性。

<input name="full_name" autofocus/>

然后，您必须添加声明来设置您的输入的自动焦点后，您的模态显示。
试试这段代码: < br > 

$(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();
});
});
小开

如果你正在寻找一个能够适用于所有情态变量的代码片段，并且在打开的代码中自动搜索第一个输入文本，你应该使用以下代码:

$('.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();
});
小开

这是最普遍的解决方案

$('body').on('shown.bs.modal', '.modal', function () {
$(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
});
  • 使用在页面加载后添加到 DOM 中的模态
  • 工作与输入，文本区，选择，而不是按钮
  • 省略隐藏的、禁用的、只读的
  • 使用褪色的模态，不需要 setInterval
小开

当您的输入/文本框打开时，尝试使用 删除模态的 tabIndex 属性。让它回到原来的样子，当您关闭输入/文本框时。这将解决问题 无关的引导程序版本和 而不影响用户体验流。

小开

根据 Bootstrap 4的文档:

由于 HTML5定义其语义的方式，autofocus HTML 属性 在 Bootstrap 模态中没有效果。要达到同样的效果，请使用 一些定制的 JavaScript。

例如:

$('#idOfMyModal').on('shown.bs.modal', function () {
$('input:first').trigger('focus')
});

连结。

小开

使用 autofocus 搜索正确的表单元素:

$('.modal').on('shown.bs.modal', function() {
$(this).find('[autofocus]').focus();
});
小开

使用 Bootstrap 4: 1/删除 < div class = “模态淡出”..。的“淡出”类 下一页(https://getbootstrap.com/docs/4.6/components/modal/)

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

如果你没有删除“淡出”类，输入将聚焦，但键盘将不会显示在 iOS 上的 Safari


提交答案