Question

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

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

段：

＆＃13;

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

＆＃13;

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

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

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

Answer 1

从HTML5开始，the default button is the first button defined。您可以使用输入印刷机来处理多个按钮：

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

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

1 个答案: