Question

像许多事情一样，我的问题最好用图片解释： http://gyazo.com/f7df971c91a5ab4a4969d12f4c5f32b6.png?1329575807

当用户位于每列的最后一个字段时，我希望当他们按Tab键时在当前输入下方弹出一个新输入（类似于Quizlet所做的那样）。

我对jQuery没有那么多经验，有人可以帮助我，或者指出我正确的方向吗？

编辑：所以这就是我目前所拥有的：

$(document).ready(function(){
$('section#attendance input:last').keydown(function(e) {
    if (e.which == 9)
    {
        var $this = $(this);
        var num = parseInt($this.attr('name').match(/\d+(,\d+)?/)[0]) + 1;
        $this.parent().append('<input type="text" name="attendance[' + num +']" value="Name and Position" class="medium" />');
    }
});

}）;

出于某种原因，在创建第一个新输入后，它不会使用该新输入作为选项卡触发器，而是使用之前使用的输入。知道为什么吗？

Answer 1

$('input[type="text"]:last').live('keyup',
    function(e) {
        if (e.which == 9) {
            $(this).parent().append($('<input/>', {
                value: '',
                type: 'text',
                            name: 'YOUR_CHOICE',
                            class: 'YOUR_CHOICE'
            }));
        }
    });

Answer 2

假设您在某个contanier中有列字段（例如'column' div）且字段有field类，而最后一个字段有last类，那么这可能会有所帮助：

$('.last').live('focusout', function() {
  var $this = $(this);
  $this.removeClass('last');
  $this.parent().append('<input class="field last" type="text"></input>');
});

当然，你可以追加比这更漂亮的东西;）

Answer 3

function KeyDown(e) {
    if (e.which == 9) { // tab
        // Do your stuff
    }
}

$(document).keydown(KeyDown);

在您的情况下，您可能不想绑定到文档，而是绑定到最后一个元素。或者你可以在处理程序方法中进行焦点检查。

如何使用jQuery（或vanilla JS）在选项卡上创建新输入

3 个答案: