Question

我有一个选择下拉列表和2个输入字段。我知道如何使用以下方法将焦点设置在任何模态的第一个输入字段上：

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

https://www.w3schools.com/code/tryit.asp?filename=FDG195P90CWU

但是当有下拉列表和输入字段时，我看不到该怎么做。

Answer 1

我认为您可能正在寻找类似的内容：serverSide

这是JQuery代码：

$("select:first").focus();

当你运行它时，你会看到选择框突出显示为蓝色（至少在Chrome中是这样）我根据similar question找到了这个答案。希望有所帮助

修改：

如果您希望它选择第一个文本或选择字段，您可以使用：

$(document).ready(function(){ $("#myBtn").click(function(){ $("#myModal").modal(); }); $('.modal').on('shown.bs.modal', function () { //$(this).find('input:text:visible:first').focus(); $("select:first").focus(); }) });

如果您需要查找其他输入字段（例如$(this).find('input[type=text],textarea,select').filter(':visible:first').focus();或password），则需要将其添加到radio button列表中。另一个similar question asked here。

Answer 2

我的解决方案是由@craztmatt和其他人开发的。我已经扩展到在触发事件的模态中选择目标元素。

// do this to make bootstrap modals auto-focus.
// delegate to body so that we only have to set it up once.
$('body').on('shown.bs.modal', function (e) {
    var ele = $(e.target).find('input[type=text],textarea,select').filter(':visible:first'); // find the first input on the bs modal
    if (ele) {ele.focus();} // if we found one then set focus.
})

如何在任何bootstrap模式中将焦点设置在第一个表单元素上

2 个答案: