jquery - 如何在 Bootstrap (4) 模态提交中创建仅包含隐藏输入的表单？

Question

我有一个在 Bootstrap 模式中只有隐藏输入(和一个隐藏提交按钮)的表单。我的意图是让用户通过单击按钮打开模式，然后让他们在显示模式后立即按 enter 以提交表单。

根据我的研究(以及反复试验)，我需要在模式或表单中有一个按键处理程序来处理输入按钮并执行表单 submit()。此外，我需要在显示模式后关注表单。

但是，焦点机制似乎无法正常工作。显示模式后，输入提交不会立即工作(我调用 form.focus())。但是，如果我在显示模式/表单后单击它，它确实有效。但我希望它无需单击模式即可工作。

我可以在这里遗漏什么吗？或者，是否有更好的方法来完全做到这一点？

这是我的代码示例。单击按钮显示模态后，enter 不起作用。但是，如果我点击模态框内的任意位置，然后点击 enter，它就会起作用。我希望 enter 无需在模态内部单击即可工作。

$('#quickSwipeModal').on('shown.bs.modal', function(e) {
  setTimeout(function() {
    $('#quickSwipeForm').focus();
  }, 400);
});
$("#quickSwipeForm").keypress(function(event) {
  if (event.which == 13) {
    event.preventDefault();
    $('#quickSwipeForm').submit();
  }
});
$('#quickSwipeForm').on('submit', function(e) {
  e.preventDefault();
  e.stopPropagation();
  alert('adding...');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-expand navbar-dark bg-dark fixed-top sub-menu">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#" data-toggle="modal" data-target="#quickSwipeModal">Quick Swipe Mode</a>
      </li>
    </ul>
  </div>
</nav>


<div class="modal fade" id="quickSwipeModal" role="dialog" aria-labelledby="quickSwipeModalTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <form id="quickSwipeForm" novalidate>
        <div class="modal-header" tabindex="-1">
          <h5 class="modal-title" id="quickSwipeModalTitle" tabindex="-1">Quick Swipe Mode</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" tabindex="-1">
							<span aria-hidden="true" tabindex="-1">&times;</span>
						</button>
        </div>
        <div class="modal-body" tabindex="-1">
          <p tabindex="-1">Swipe ID cards to add notes instantly.</p>
        </div>
        <div class="modal-footer" tabindex="-1">
          <input type="hidden" name="PatientId" tabindex="-1" />
          <input type="hidden" name="CreateDate" tabindex="-1" />
          <input type="submit" style="display: none" tabindex="-1" />
          <button type="button" class="btn btn-primary" data-dismiss="modal" tabindex="-1">Done</button>
        </div>
      </form>
    </div>
  </div>
</div>

Answer 1

尝试将 tabindex=0 添加到表单并检查您的代码是否有效。

<form id="quickSwipeForm" tabindex="0" novalidate>