如何在输入的Bootstrap（4）模态提交中创建仅包含隐藏输入的表单？

Question

我有一个只有隐藏输入（和一个隐藏的提交按钮）的表单在Bootstrap模式中。我的目的是让用户通过单击按钮打开模态，然后在显示模式提交表单后立即按Enter键。

基于我的研究（以及试验和错误），我需要在模态或表单内部有一个按键处理程序来处理输入按钮并执行submit()形式。此外，我需要在模态显示后关注表单。

但是，焦点机制似乎无法正常工作。在显示模态后，输入提交不起作用（我称之为form.focus()）。但是，如果我在显示后单击模态/表单，它确实有效。但是我希望它能够在不必点击模态的情况下工作。

我可以在这里遗漏一些东西吗？或者，有没有更好的方法来完成这项工作？

这是我的代码示例。单击按钮以显示模态后，输入不起作用。但是，如果我点击模态内的任何地方，然后按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();
        }
    });