将焦点输入放在模态显示上

Question

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

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

http://jsfiddle.net/1aeur58f/2513/

Answer 1

你的代码基本上是正确的。但是事件

show.bs.modal

在模态显示之前被触发。您需要使用 shown.bs.modal

 事件来代替。

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

http://jsfiddle.net/1aeur58f/2544/

Answer 2

在您的代码中，使用

autofocus

<input name="myInput" value="MyVal" type="text" autofocus/>

Answer 3

对于 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();
    });
});