135

我加载了一个动态引导模式，它包含很少的文本输入。我面临的问题是我希望光标专注于此模式中的第一个输入，默认情况下不会发生这种情况。
所以我写了这段代码来做到这一点：

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

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

4

16 回答 16

210

@scumah 为您提供答案：Twitter bootstrap - 点击时关注模态框内的 textarea

对于引导程序 2

modal.$el.on('shown', function () {
$('input:text:visible:first', this).focus();
});

更新：对于引导程序 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();
})
于 2013-03-06T16:12:27.420 回答
87

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

<input value="" autofocus>

完美运行。

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

于 2013-12-12T17:53:34.567 回答
58

David Taiaroa 的答案是正确的，但不起作用，因为“淡入”模态的时间不允许您将重点放在输入上。您需要创建一个延迟：

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

})
于 2014-12-26T08:47:17.833 回答
26

通常的代码（如下）对我不起作用：

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

我找到了解决方案：

$('body').on('shown.bs.modal', '#myModal', function () {
    $('input:visible:enabled:first', this).focus();
})
于 2015-12-10T13:44:28.393 回答
10

我得到那个引导程序在他们的页面上添加了以下信息：

由于 HTML5 定义其语义的方式，autofocus HTML 属性在 Bootstrap 模式中无效。要达到相同的效果，请使用一些自定义 JavaScript：

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

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

于 2015-03-31T14:33:42.490 回答
8

这是最适合您的简单代码，适用于所有具有任何输入字段且具有焦点的弹出窗口

$(".modal").on('shown.bs.modal', function () {
    $(this).find("input:visible:first").focus();
});
于 2016-06-04T20:43:53.427 回答
4

我认为最正确的答案，假设使用 jQuery，是这个页面中所有答案的方面的合并，加上 Bootstrap 传递的事件的使用：

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

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

于 2017-01-24T16:05:41.813 回答
3

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

$(this).find('input:text')[0].focus();
于 2013-03-06T13:12:40.700 回答
3

第一步，您必须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();
    });
});
于 2017-11-02T04:22:41.107 回答
2

如果您正在寻找适用于所有模式的片段，并在打开的模式中自动搜索第一个输入文本，您应该使用这个：

$('.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();
});
于 2019-02-26T09:03:34.343 回答
2

使用 Bootstrap 4： 1/ 删除<div class="modal fade" 处的“fade”类... 2/ 下一步（https://getbootstrap.com/docs/4.6/components/modal/）

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

如果您没有删除“淡入淡出”类，则输入将集中，但键盘不会显示在 iOS 上的 Safari 中

于 2021-03-10T09:00:55.257 回答
1

使用自动对焦搜索正确的表单元素：

$('.modal').on('shown.bs.modal', function() {
  $(this).find('[autofocus]').focus();
});
于 2020-07-15T00:57:07.840 回答
0

如果您只想自动聚焦任何打开的模式，您可以在您的模式或库函数中放入此片段，该片段将专注于第一个输入：

$('.modal').on('shown.bs.modal', function () {
  $(this).find('input:first').focus();
})
于 2016-04-20T12:12:38.830 回答
0

这是最通用的解决方案

$('body').on('shown.bs.modal', '.modal', function () {
    $(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
});
  • 与页面加载后添加到 DOM 的模式一起使用
  • 适用于输入、文本区域、选择而不是按钮
  • 省略隐藏、禁用、只读
  • 适用于褪色的模态，不需要 setInterval
于 2019-09-11T09:04:14.943 回答
0

当您的输入/文本框打开时，尝试删除 modal 的 tabIndex 属性。当您关闭输入/文本框时，将其设置回原来的状态。这将解决问题，无论引导程序版本如何，并且不会影响用户体验流程。

于 2019-11-20T07:04:55.767 回答
0

根据 Bootstrap 4 文档：

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

例如：

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

链接。

于 2020-02-29T23:15:32.677 回答