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

Posted 2023-05-07

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

【英文标题】：How to Set focus to first text input in a bootstrap modal after shown

【发布时间】：2013-02-21 06:33:58

【问题描述】：

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

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

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

【问题讨论】：

你能在jsfiddle.net提供一个演示吗？

尝试为它设置一个超时，其他东西可能会干扰。 setTimeout(function() /* Your code */ , 100);

你能帮我试试这个吗... var index = 0; $('#modalContainer').on('show', function () index = 1; ); if(index) $('input:text:visible:first').focus();

Twitter bootstrap modal input field focus的可能重复

【参考方案1】：

@scumah 为你解答：Twitter bootstrap - Focus on textarea inside a modal on click

对于引导程序 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 验证时提供最大的调用堆栈错误！。因此，这对我没有用。

@Vandita，如果你想在 codepen.io 上用笔来说明你描述的问题，我很乐意为你看看。

【参考方案2】：

我找到了最好的方法，无需 jQuery。

<input value="" autofocus>

完美运行。

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

【讨论】：

花了几个小时试图完成这项工作（单击或处理程序）后，我发现只有一种方法有效，即 html5 自动对焦属性：<input type="text" class="form-control" placeholder="" autofocus>

这是在 MVC3 控件上执行此操作的方法：@Html.TextBoxFor(m => m.UserName, new @autofocus="" )

它对我没有用...在显示引导模式后输入失去焦点

如果你从你的模态中删除tabdindex="-1"，它就可以工作，但是它只能工作一次。关闭和重新打开没有焦点。

在引导模态文档中，模态不支持此功能，但可用于其他形式。由于 HTML5 定义其语义的方式，autofocus HTML 属性在 Bootstrap 模式中无效。要达到相同的效果，请使用一些自定义 javascript： $('#myModal').on('shown.bs.modal', function () $('#myInput').trigger('focus') )

【参考方案3】：

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

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

)

【讨论】：

你是这里唯一的人。您的解决方案是唯一有效的解决方案。我试图为 timeOut 设置一个较小的值，但没有奏效。似乎模态“完成加载”在 1000 毫秒 :(

正确的是使用showed.bs.modal事件：getbootstrap.com/javascript/#modals-events

您可以使用 delay() 而不是使用 setTimeout()，如下所示... $('#textareaID').delay(1000).focus().select();

【参考方案4】：

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

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

我找到了解决方案：

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

【讨论】：

听起来你的选择器有问题——不是方法。

【参考方案5】：

我知道引导程序在他们的页面上添加了以下信息：

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

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

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

【参考方案6】：

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

$(".modal").on('shown.bs.modal', function () 
    $(this).find("input:visible:first").focus();
);

【参考方案7】：

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

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

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

【讨论】：

如果您还希望它忽略只读文本框，请将行修改为：$('input:visible:enabled:not([readonly]):first', e.target).focus( );

【参考方案8】：

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

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

【讨论】：

这是我使用的：$(this).find('input:text').first().focus()

【参考方案9】：

第一步，您必须在表单输入中设置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();
    );
);

【讨论】：

我用过 $(this).find('[autofocus]').focus();它有效

【参考方案10】：

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

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

【参考方案11】：

使用引导程序 4： 1/ 删除 处的“fade”类 2/ 下一个 (https://getbootstrap.com/docs/4.6/components/modal/)

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

【讨论】：

从模态div中去掉fade类也是Bootstrap 5的解决方案。

【参考方案12】：

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

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

【参考方案13】：

如果你只想自动聚焦任何打开的模式，你可以在你的模式或 lib 函数中放入这个 sn-p，它将专注于第一个输入：

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

【参考方案14】：

这是最通用的解决方案

$('body').on('shown.bs.modal', '.modal', function () 
    $(this).find(":input:not(:button):visible:enabled:not([readonly]):first").focus();
);

适用于页面加载后添加到 DOM 的模式 适用于输入、文本区域、选择而不是按钮 忽略隐藏、禁用、只读 适用于褪色模式，无需 setInterval

【参考方案15】：

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

【参考方案16】：

根据 Bootstrap 4 文档：

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

例如：

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

Link.