Bootstrap 将输入集中在模态显示上

gblwokeq 于 11个月前发布在 Bootstrap

关注(0)|答案(3)|浏览(137)

如何在模态显示中自动聚焦输入？目前我这样做，但它不工作：

jQuery(document).ready(function($) {
    $('#myModal').on('show.bs.modal', function() {
        $('input[name="myInput"]').focus();
    });
});

3条答案

你的代码基本上是正确的。但是show.bs.modal事件在**模态显示之前就被触发了。你需要使用shown.bs.modal事件来代替。

jQuery(function($) {
    $('#myModal').on('shown.bs.modal', function() {
        $('input[name="myInput"]').focus();
    });
});

在代码中，使用autofocus
<input name="myInput" value="MyVal" type="text" autofocus/>个

对于Bootstrap 5：

jQuery(function($) {
    $('#youModal').on('shown.bs.modal', function() {
        $('input[name="youInputText"]').focus();
    });
});

字符串
对于WordPress：

jQuery(function($) {
    jQuery('#youModal').on('shown.bs.modal', function() {
        jQuery('input[name="youInputText"]').focus();
    });
});

型