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

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

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

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

@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以匹配并更新表单输入字段的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/zh-CN/docs/Web/HTML/Element/Input

David Taiaroa的答案是正确的，但没有用，因为“淡入”模态的时间不能让您将注意力集中在输入上。您需要创建一个延迟：

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

})

通常的代码（见下文）不为我工作：

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

我找到了解决方案：

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

在这里看到更多

我知道该引导程序在其页面上添加了以下信息：

由于HTML5如何定义其语义，因此autofocus HTML属性在Bootstrap模态中无效。为了达到相同的效果，请使用一些自定义JavaScript：

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

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

这是简单的代码，将在所有具有任何输入字段且将其集中的弹出窗口中最适合您

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

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

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

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

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

$('.modal').on('shown.bs.modal', function () {
  $(this).find('input:first').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')
});

链接。

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

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

$(document).ready(function() {
  $("#button").click(function() {
    $('#mymodal').on('shown.bs.modal', function() {
      $('#myinput').focus();
    })
  });
});

• 是“ #button”调用模式形式，

• “ #mymodal”是模式形式，

• “ #myinput”是您要获得焦点的输入