javascript - 将 Bootstrap 默认按钮更改为当前面板

Question

使用 Bootstrap，应用程序具有一个包含一个表单和多个面板的页面，每个面板都有一个提交按钮。每当按下 Enter 键时，第一个面板的按钮就是表单默认按钮。当用户在第二个面板中填写文本输入并按 Enter 时，第二个面板的按钮值应发送到 Controller ，但始终发送第一个面板按钮(表单默认按钮)的值。

我尝试添加一个脚本，以在单击或激活相应面板按钮时触发焦点或激活该面板按钮，但无济于事。有谁知道当用户使用面板时如何定位面板按钮进行提交？提前致谢!

片段:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-lg-12">
    <div class="panel panel-default" id="basicsPanel">
      <div class="panel-heading">Basic Info</div>
      <div class="panel-body">
        <div class="row">
          <!-- Text boxes and such -->
        </div>
        <div class="row">
          <!-- This is always the default button upon pressing Enter key -->
          <button type="submit" id="saveBasics" name="buttonCommand" class="btn btn-success pull-right" value="Save Basics">Save Basics</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-lg-12">
    <div class="panel panel-info" id="ownerPanel">
      <div class="panel-heading">Owner</div>
      <div class="panel-body">
        <div class="row">
          <div class="col-lg-4">
            <!-- Other text boxes and such -->
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12 text-right">
            <!-- This button should be the one used when a User presses the Enter key while filling in data in this panel -->
            <button type="submit" id="saveOwner" name="buttonCommand" class="btn btn-success" value="Save Owner">Save Owner</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

尝试的脚本示例，当面板被激活时，它确实关注正确的按钮，但阻止用户实际在面板的文本框中输入信息:

$("#ownerPanel").click(function () {
    $("#saveOwner").focus();
});

$("#basicsPanel").click(function () {
    $("#saveBasics").focus();
});

Answer 1

从 HTML5 开始，the default button is the first button defined 。您有几个选项可以通过按下 Enter 来处理多个按钮:

• 定义多个表单，每个表单都有一个提交按钮。这样每个面板都直接绑定(bind)到您想要它使用的按钮。如果表单是独立的，那么这很干净，但如果您仍然需要所有表单中的数据，则需要在 JavaScript 中捕获提交并将其他表单的数据拉入有效负载中。
• 在 JavaScript 中捕获按键事件并使用当前聚焦的字段来确定应按下哪个按钮。这使您可以将所有数据保存在一个表单中。选择要使用的按钮的一个简单策略可能是从焦点字段遍历到 .closest('panel')，然后返回到 children('input[type=submit]' )。