Question

我有多组输入字段和每组的按钮。

用户必须填写每组的输入字段，然后单击相关的“确定”按钮。现在，不必单击“确定”按钮，如何启用回车键以触发“确定”按钮（取决于用户填写的输入字段集）？通常我会这样做，但如何使用多个输入字段和按钮？

    $('#open').keypress(function(e){
      if(e.keyCode==13){
        $('#search').trigger('click');
      }
    });

以下是输入字段和确定按钮的示例

Apples: <input type="text" name="apple"><br>
Mangos: <input type="text" name="mango"><br>
<button id="part1">OK</button>

Carrots: <input type="text" name="carrot"><br>
Beans: <input type="text" name="beans"><br>
<button id="part3">OK</button>

Tom Hanks: <input type="text" name="hanks"><br>
Heidi Klum: <input type="text" name="klum"><br>
<button id="part2">OK</button>

当用户填写Tom Hanks和Heidi Klum输入字段时，输入键应点击#part2按钮。当用户填写Apples和Mangos输入字段时，输入键应点击#part1按钮。

Answer 1

这是一种不需要为元素添加额外属性的方法。它的工作原理是让jQuery使用nextAll()：

找到下一个可用的提交按钮

HTML：

<div>
    Apples: <input type="text" name="apple"><br>
    Mangos: <input type="text" name="mango"><br>
    <button id="part1" class="submit">OK</button>
</div>

<div>
    Carrots: <input type="text" name="carrot"><br>
    Beans: <input type="text" name="beans"><br>
    <button id="part3"  class="submit">OK</button>
</div>
<div>
    Tom Hanks: <input type="text" name="hanks"><br>
    Heidi Klum: <input type="text" name="klum"><br>
    <button id="part2" class="submit">OK</button>
</div>

JS：

$(document).ready(function() {
    var buttonEl;

    $('input').on('focus', function() {
        buttonEl = $(this).nextAll('button.submit').eq(0);        
    });

    $(document).keypress(function(e){        
      if(e.keyCode==13){
        buttonEl.trigger('click');
      }
    });    

    $('button').on('click', function() {
        alert($(this).attr('id'));
    });
});

jsFiddle：http://jsfiddle.net/sysnull/4m38y5pe/

Answer 2

HTML：

<div id="open">
Apples: <input type="text" name="apple" data-button-id="part1"><br>
Mangos: <input type="text" name="mango" data-button-id="part1"><br>
<button id="part1">OK</button>

Carrots: <input type="text" name="carrot" data-button-id="part3"><br>
Beans: <input type="text" name="beans" data-button-id="part3"><br>
<button id="part3">OK</button>

Tom Hanks: <input type="text" name="hanks" data-button-id="part2"><br>
Heidi Klum: <input type="text" name="klum" data-button-id="part2"><br>
<button id="part2">OK</button>
</div>

JS：

$(function(){
  $('#open').on('keypress', 'input', function(e){
    if(e.keyCode==13){
       $('#'+$(e.target).data('buttonId')).trigger('click');
    }
  });
});

更新（替代）：

<div id="open">
<div class="block">
  Apples: <input type="text" name="apple"><br>
  Mangos: <input type="text" name="mango"><br>
  <button class="submit">OK</button>
</div>
<div class="block">
  Carrots: <input type="text" name="carrot"><br>
  Beans: <input type="text" name="beans"><br>
  <button class="submit">OK</button>
</div>
<div class="block">
  Tom Hanks: <input type="text" name="hanks"><br>
  Heidi Klum: <input type="text" name="klum"><br>
  <button class="submit">OK</button>
</div>
</div>

JS：

$(function(){
  $('#open').on('keypress', 'input', function(e){
    if(e.keyCode==13){
      $(e.target).closest('.block').find('.submit').trigger('click'); 
    }
  });
});

处理多个输入字段和确定按钮

2 个答案: