javascript - 我可以控制按 Enter 时触发哪个提交按钮吗？

Question

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

当我将文本插入到其中一个文本框时，我希望 Enter 键将触发包含此文本框的同一 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 按钮呈现为提交按钮。

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