Question

<form>
    <div id="part-inputs">
        <div class="part-input">
            <label>Part 1</label>
            <input type="number" class="start" name="s[0]" value="" placeholder="start time" tabindex="3">
            <input type="number" class="finish" name="f[0]" value="" placeholder="finish time" tabindex="4">
        </div>
    </div>
    <input type="submit" name=submit>
</form>

<script>
    var nextPartNo = 2;
    var template = '<div class="part-input">' +
        '<label>Part <%= partNo %></label>' +
        '<input type="number" class="start" name="s[<%= partNo -1 %>]" value="" placeholder="start time" tabindex="<%= (partNo-1)*2+1 %>">' +
        '<input type="number" class="finish" name="f[<%= partNo -1 %>]" value="" placeholder="finish time" tabindex="<%= (partNo-1)*2+2 %>">' +
        '</div>';
    var compiledTemplate = _.template(template);

    // check for tab keydown at finish field
    $("#part-inputs").on('keydown', '.finish', function(event) {

        var keyCode = event.keyCode || event.which;

        if (keyCode == 9) { // tab key
            var $partInputTargeted = $(event.target.parentElement); // div#part-input
            if (!$partInputTargeted.is(':last-child')) {
                return;
            }
            $("#part-inputs").append(compiledTemplate({
                partNo: nextPartNo
            }));
            nextPartNo++;
        }
    });

    // check for enter key at both fields
    $("#part-inputs").on('keydown', ['.start', '.finish'], function(event) {

        var keyCode = event.keyCode || event.which;

        if (keyCode == 13) { // enter key
            console.log("here"); // this verifies we reach the block where we trigger jquery event 
            event.preventDefault();
            var e = jQuery.Event("keydown");
            e.which = e.keyCode = 9; // Create tab key event
            $(event.target).trigger(e);
        }
    });
</script>

上面是动态表单的片段，我正在创建。 start field和finish field有多个单位。每个单位是div#part-input。所有div＃part-input div都是div#part-inputs的子项。

在最后finish field的{{1}}处触发的标签事件上，会追加新的div#part-input。我正在使用underscore.js编译模板（这按预期工作）

现在我想div#part-input enter key个字段（开始或结束）触发any。{代码没有做任何事情。

Answer 1

首先看来你的提交按钮中有一个拼写错误，错过了名称prop周围的引号。

试试这个，它应该适用于你正在寻找的东西。如果在完成输入时按下回车键，它将触发。我拿出了我们的模板，添加了它自己的功能，所以你可以在多个地方调用它。

function addTemplate() {
  var $partInputTargeted = $(event.target.parentElement); // div#part-input
  if (!$partInputTargeted.is(':last-child')) {
    return;
  }
  console.log('add new template');
}

$("#part-inputs .start, #part-inputs .finish").keydown(function (event) {
  if (event.which === 13) {
    event.preventDefault();
    
    var index = $('input').index(this) + 1;
    $('input').eq(index).focus();
    
    if($(this).attr('class') === 'finish') {
      addTemplate();
    }
  }
});

// check for tab keydown at finish field
$("#part-inputs").on('keydown', '.finish', function(event) {
  var keyCode = event.keyCode || event.which;

  if (keyCode == 9) { // tab key
    addTemplate();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <div id="part-inputs">
        <div class="part-input">
            <label>Part 1</label>
            <input type="number" class="start" name="s[0]" value="" placeholder="start time" tabindex="3">
            <input type="number" class="finish" name="f[0]" value="" placeholder="finish time" tabindex="4">
        </div>
    </div>
    <input type="submit" name="submit" />
</form>

Answer 2

如果我理解正确，您希望在用户按下enter键时将注意力更改为下一个输入。为什么不直接用javascript设置焦点？没有必要伪造键盘事件。

这段代码可以帮助您：

$('input,select').keydown( function(e) { // Add event listener
  var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  if(key == 13) { // If enter key
    e.preventDefault();
    var inputs = {YOUR INPUTS} // $('.YOUR-SEELCTOR-CLASS').find(':input:visible');
    var nextinput = 0;

    // Find next input
    if (inputs.index(this) < (inputs.length-1)) {
      nextinput = inputs.index(this)+1;
    }

    // Handle input focus
    if (inputs.length==1) {
      $(this).blur().focus();
    } else {
      inputs.eq(nextinput).focus();
    }
  }
});

无法使用jquery手动触发keydown事件

2 个答案: