如何在输入时在 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>

Answer 2

我想进入工作而不必在模态框内单击。

改变

    $("#quickSwipeForm").keypress(function (event) {
        if (event.which == 13) {
            event.preventDefault();
            $('#quickSwipeForm').submit();
        }
    });

收件人：

    $(document).keypress(function (event) {
        if (event.which == 13) {
            event.preventDefault();
            $('#quickSwipeForm').submit();
        }
    });