无法使用 jquery 手动触发按键事件

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>

以上是我正在创建的动态表单的片段。有多个单位astart field和afinish field。每个单元是一个div#part-input。所有 div#part-input div 都是 div#part-inputs 的 children。

在最后 div#part-input 的 finish field 处触发的选项卡事件，将附加一个新的 div#part-input。我正在使用 underscore.js 编译模板（这按预期工作）

现在我希望 enter key 在字段的 any 处（开始或结束）触发相同的 tab event。这是代码没有做任何事情的地方。

Answer 1

首先看起来您的提交按钮中有一个拼写错误，缺少 name 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 手动触发按键事件

Unable to manually trigger keydown event with jquery

html

javascript

jquery

keydown

jquery-events