Question

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

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

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

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

这是我的代码示例。单击按钮以显示模态后，输入不起作用。但是，如果我点击模态中的任何位置，然后点击输入，它确实有效。我希望输入，而无需点击模态内部。

＆＃13;

$('#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...');
});

＆＃13;

<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>

＆＃13;

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();
        }
    });

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

2 个答案: