Question

我有一个弹出模态的按钮，它确实弹出并且可以正常工作。表格在那里应该如何，等等。只有一件事不起作用，那就是模态没有聚焦。我也尝试用 JS 做这件事，我在另一个 stackoverflow 帖子中找到了它，但这也没有帮助我。

代码

<div class="modal" id="joinModal" tabindex="-1" role="dialog" aria-labelledby="joinModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="joinModal">Inschrijven voor de Austronauten opleiding</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="../action/handler.php" method="post">
                    <div class="form-group">
                        <label for="fullName">Je volledige naam</label>
                        <input type="text" class="form-control" id="fullName" name="fullName" placeholder="Henk Smit" autofocus>
                    </div>
                    <div class="form-group">
                        <label for="email">Je email adres</label>
                        <input type="email" class="form-control" id="email" name="email" placeholder="naam@email.com">
                    </div>
                    <div class="form-group">
                        <label for="age">Wat is je leeftijd?</label>
                        <input type="number" class="form-control" id="age" name="age" placeholder="0"
                    </div>

                    <div class="form-group">
                        <label for="degree">Van welk niveau kom je?</label>
                        <select class="form-control" id="degree" name="degree">
                            <option>Mavo</option>
                            <option>Havo</option>
                            <option>VWO</option>
                        </select>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuleren</button>
                <button type="button" class="btn btn-primary">Inschrijven</button>
            </div>
            </form>
        </div>
    </div>
</div>

在调用时显示一个未聚焦的模态。

触发模态的按钮

<button type="button" class="btn text-success bg-transparent" style="box-shadow: none;" data-toggle="modal" data-target="#joinModal" autofocus>Inschrijven</button>```

Answer 1

我猜您正在寻找 shown.bs.modal 事件。 documentation 中的更多信息。

因此，当为您的模态触发该事件时，只需定位第一个 input 并聚焦它。

聚焦 div 没有用。重点 input 通常是用户想要的。

$("#joinModal").on("shown.bs.modal", function(){
  $(this).find("input").first().focus()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>



<button type="button"  class="btn text-success bg-transparent" style="box-shadow: none;" data-toggle="modal" onclick="focus()" data-target="#joinModal" autofocus>Inschrijven
</button>

<div class="modal" id="joinModal" tabindex="0" role="dialog" aria-labelledby="joinModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="joinModal">Inschrijven voor de Austronauten opleiding</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="../action/handler.php" method="post">
                    <div class="form-group">
                        <label for="fullName">Je volledige naam</label>
                        <input type="text" class="form-control" id="fullName" name="fullName" placeholder="Henk Smit"
                               autofocus>
                    </div>
                    <div class="form-group">
                        <label for="email">Je email adres</label>
                        <input type="email" class="form-control" id="email" name="email" placeholder="naam@email.com">
                    </div>
                    <div class="form-group">
                        <label for="age">Wat is je leeftijd?</label>
                        <input type="number" class="form-control" id="age" name="age" placeholder="0"
                    </div>

                    <div class="form-group">
                        <label for="degree">Van welk niveau kom je?</label>
                        <select class="form-control" id="degree" name="degree">
                            <option>Mavo</option>
                            <option>Havo</option>
                            <option>VWO</option>
                        </select>
                    </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuleren</button>
                <button type="button" class="btn btn-primary">Inschrijven</button>
            </div>
            </form>
        </div>
    </div>
</div>

无论我尝试什么，Bootstrap 模式都不会聚焦

1 个答案: