Question

我有以下脚本，它在我的页面上为表单添加了一个额外的字段。我需要在生成时将焦点设置为新字段，但我不知道该怎么做。

HTML：

<input type="button" onclick="javascript:;" id="addRow" value="Add Field" style="margin-bottom: 10px;">

使用Javascript：

var $j = jQuery.noConflict();
$j(document).ready(function(){
$j(function(){
    var rows = 1;
    $j('#addRow').click(function(){
        $j('#nameRows').append('<div class="nameRow"><input type="text" name="names['+rows+'][name]" value="" /><a href="javascript:;" class="removeRow">Remove</a>');
        rows++;
    });
    $j(document).on('click', '.removeRow', function(){
        $j(this).closest('.nameRow').remove();
    });
});
});

Answer 1

$j('#addRow').click(function(){
    $j('#nameRows').append('<div class="nameRow"><input type="text" name="names['+rows+'][name]" value="" /><a href="javascript:;" class="removeRow">Remove</a>');
    $j("#nameRows input:last").focus();
    rows++;
});

Answer 2

由于您使用append()，这意味着附加的元素将是最后一个。所以你可以使用：

$j('#nameRows :input:text:enabled:visible:last').focus();

完整的点击事件绑定如下所示：

$j('#addRow').click(function(){
    $j('#nameRows').append('<div class="nameRow"><input type="text" name="names['+rows+'][name]" value="" /><a href="javascript:;" class="removeRow">Remove</a>');
    $j('#nameRows :input:text:enabled:visible:last').focus();
    rows++;
});

注意我添加了其他选择器来排除隐藏，禁用和非文本输入元素。 :input作为选择器IMHO也优于input。 HTH

Answer 3

您可以附加元素并将焦点设置为一次性新添加的元素：

$j('#addRow').click(function(){
    $j('#nameRows').append('<div class="nameRow"><input type="text" name="names['+rows+'][name]" value="" /><a href="javascript:;" class="removeRow">Remove</a>');
    $('#nameRows input:last').focus();
    rows++;
});

Answer 4

只需引用新元素，并应用焦点方法：

$j(document).ready(function()
{
//$j(function(){ no need for a second ready callback inside the first...
    var rows = 1;
    $j('#addRow').click(function()
    {
        $j('#nameRows').append('<div class="nameRow"><input type="text" name="names['+rows+'][name]" value="" /><a href="javascript:;" class="removeRow">Remove</a>');
        $k('#nameRows').find('input:last-child').focus();//<-----
        rows++;
    });
    $j(document).on('click', '.removeRow', function()
    {
        $j(this).closest('.nameRow').remove();
    });
});

这就是全部。您也可以使用document.createElement，并将其分配给某个地方的变量，因此您也可以参考新创建的元素

将焦点设置为生成的文本字段

4 个答案: