我可以控制按 Enter 时触发哪个提交按钮？答案

【问题标题】：can I control which submit button would be triggered when I press Enter?我可以控制按 Enter 时触发哪个提交按钮？
【发布时间】：2019-12-26 00:45:33
【问题描述】：

我有一个表格。它有几个div。每个都包含一个文本框和一个提交按钮。

当我将文本插入其中一个文本框时，我希望输入键将触发包含此文本框的同一 div 内的按钮。

Enter 总是触发第一个提交按钮！可以修复吗？（也许是 Jquery？）你可以在这里看到一个工作示例：

https://codepen.io/elic55/pen/LYELQrP

<form>
        <div id="div1">
          div1
            <input id="Text1" type="text" />
            <input id="Submit1" type="submit" value="submit" />
        </div>

        <div id="div2">
          div2
            <input id="Text2" type="text" />
            <input id="Submit2" type="submit" value="submit" />
        </div>

        <div id="div3">
          div3
            <input id="Text3" type="text" />
            <input id="Submit3" type="submit" value="submit" />
        </div>
    </form>





$(function () {
            $('#Submit1').on('click', function () {
                alert("1");
            })
            $('#Submit2').on('click', function () {
                alert("2");
            })
            $('#Submit3').on('click', function () {
                alert("3");
            })
        })

我更喜欢不会改变结构的解决方案，因为：我正在使用 asp.net - 必须有一个表格！ asp 按钮呈现为提交按钮。

【问题讨论】：

标签： javascript jquery html asp.net

【解决方案1】：

使用 jquery 和 $(":input");

$(function () {

            $(":input").on('click', function () {
                    alert("3");
            });
            //if you also want Enter 
           $(document).on('keyup', function (e) {
            if (e.keyCode === 13) {
             alert("3"); // or anything you want to happen
               }
           e.preventDefault();
           return false;
            });
            })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
        <div id="div1">
          div1
            <input id="Text1" type="text" />
            <input id="Submit1" type="submit" value="submit" />
        </div>

        <div id="div2">
          div2
            <input id="Text2" type="text" />
            <input id="Submit2" type="submit" value="submit" />
        </div>

        <div id="div3">
          div3
            <input id="Text3" type="text" />
            <input id="Submit3" type="submit" value="submit" />
        </div>
    </form>

【讨论】：

【解决方案2】：

如你所愿此代码检测到 Enter 键盘放置并记录下一个按钮：

$("input").on('keyup', function (e) {
    if (e.keyCode === 13) {
        console.log($(this).next().attr("id"));
    }
  e.preventDefault();
  return false;
});
// prevent form submit (or change button type from submit into button)
$("form").submit(function(e){
   e.preventDefault();
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<form>
        <div id="div1">
          div1
            <input id="Text1" type="text" />
            <input id="Submit1" type="submit" value="submit" />
        </div>

        <div id="div2">
          div2
            <input id="Text2" type="text" />
            <input id="Submit2" type="submit" value="submit" />
        </div>

        <div id="div3">
          div3
            <input id="Text3" type="text" />
            <input id="Submit3" type="submit" value="submit" />
        </div>
    </form>

【讨论】：

【解决方案3】：

我想纯 HTML 的解决方案是将表单分成三个表单：

<form>
  <div id="div1">
    div1
    <input id="Text1" type="text" />
    <input id="Submit1" type="submit" value="submit" />
  </div>
</form>
<form>
  <div id="div2">
    div2
    <input id="Text2" type="text" />
    <input id="Submit2" type="submit" value="submit" />
  </div>
</form>
<form>
  <div id="div3">
    div3
    <input id="Text3" type="text" />
    <input id="Submit3" type="submit" value="submit" />
  </div>
</form>

（如果您非常关心屏幕阅读器，这可能不是一个好的解决方案，但拥有多个提交按钮可能也不是。）

【讨论】：