我可以控制按 Enter 時觸發哪個提交按鈕嗎？

Question

我有一個表格。 它有幾個div。 每個都包含一個文本框和一個提交按鈕。

當我將文本插入其中一個文本框時，我希望回車鍵將觸發包含此文本框的同一 div 內的按鈕。

輸入總是觸發第一個提交按鈕？ 可以修復嗎？ （也許是 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");
            })
        })

我更喜歡不會改變結構的 sokution，因為：我正在使用 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>

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

Answer 3

我想純粹的 HTML 解決方案是將表格分成三個 forms：

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

（如果您非常關心屏幕閱讀器，這可能不是一個好的解決方案，但擁有多個提交按鈕可能也不是。）