javascript - 输入时提交表单，页面上包含多个包含文件

Question

我试图允许在输入时提交我的登录模式，我在单个页面上包含多个登录模式，所以我不希望当用户按输入时提交它们。这些模式默认是隐藏的。当他们按下 Enter 键时，应该会触发对 modal-footer div 的点击。

模态框的 HTML:

<!-- The Modal -->
<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header" id="modal-header">
            <span class="close">×</span>
            <h1>Team Login</h1>
        </div>
        <div class="modal-body">
            <div style="text-align:left;">
                <form id="teamLogin" name="teamLogin" method="post">
                    <a>User ID</a>
                    <input type="text" name="username" id="username"><br>
                    <a>Password</a>
                    <input type="password" name="password" id="password">
                </form>
            </div>
        </div>
        <div class="modal-footer" id="modal-footer">Login</div>
    </div>
</div>

首次模式提交的 JavaScript:

if ($("#myModal").length != 0) {
    $(window).keyup(function(e) {
        var keyCode = e.which;
        if (keyCode == 13) {
            $("#modal-footer").trigger("click");
        }
    });
}

这是第二个模态的 JavaSript，除了 ID 不同之外，它们完全相同:

if ($("#myModalCarrier").length != 0) {
    $(window).keypress(function(e) {
        var keyCode = e.which;
        if (keyCode == 13) {
            $("#modal-footerCarrier").trigger("click");
        }
    });
}

目前在输入时，当显示myModal时，它也会提交myModalCarrier，但反之则不然。

Answer 1

我可以提供一种替代方案，只使用 HTML 的设计方式，而不使用 JavaScript 吗？也就是说，提交操作被设计为默认在 HTML 表单上输入时发生。

如果您提供“单个页面上的多个模式”代码示例，我也会解决该特定问题。事实上，我是根据您提供的示例代码来回答的。

要实现，请用 <form> 包围您的模式。元素并将登录设置为 type="submit" 按钮.

这是结果(如果您愿意，还可以是 jsbin:https://jsbin.com/lopasaxucu/edit?html,output):

<form id="teamLogin" name="teamLogin" method="post">
  <div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header" id="modal-header">
            <span class="close">×</span>
            <h1>Team Login</h1>
        </div>
        <div class="modal-body">
            <div style="text-align:left;">
                    <a>User ID</a>
                    <input type="text" name="username" id="username"><br>
                    <a>Password</a>
                    <input type="password" name="password" id="password">
            </div>
        </div>
        <div class="modal-footer" id="modal-footer">
          <button type="submit">Login</button>
      </div>
    </div>
  </div>
  </form>
  
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>