我正在努力实现以下目标:
- 当页面加载时,焦点转到表单中的第一个元素。
- 当在表单上按下按钮时,会出现一个模态以进行确认,焦点应位于模态对话框内的“继续”按钮上。
我设法使第一个工作正常,但第二个我不知道为什么它不工作。以下是我的代码。
HTML
<form method="post" {% if action %} action="{{ action }}" {% endif %} role="form" enctype="multipart/form-data">
<!-- Modal -->
<div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">Confirmation</h4>
</div>
<div class="modal-body">
{{ confirm | default: "Would you like to proceed?" }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" id="submit-main-form" class="btn btn-primary">
<i class="fa fa-save"></i> {{ submit_text | default: "Proceed" }}
</button>
</div>
</div>
</div>
</div>
</form>
脚本
/* Sets focus on the first element of the form */
$(document).ready(function() {
$('form:first *:input[type!=hidden]:first').focus();
$("#confirmationModal").on('show.bs.modal', function(event) {
// not setting focus to submit button
$("#submit-main-form").focus();
});
});
最佳答案
您正在使用 show.bs.modal
,它在模式即将显示时发生
我相信您需要 shown.bs.modal
事件,该事件在所有 CSS 转换完成时模式完全显示时发生。
关于javascript - 打开时将焦点设置到引导模式内的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38374259/