0

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

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();
    });
});
});
4

4 回答 4

5 
$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++;
});
于 2012-12-20T19:47:17.090 回答
4

由于您正在使用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比input作为选择器恕我直言更好。高温高压

于 2012-12-20T19:48:31.703 回答
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>');
    $('#nameRows input:last').focus();
    rows++;
});
于 2012-12-20T19:48:39.957 回答
0

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

$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, 并将其分配给某处的变量，因此您也可以参考新创建的元素

于 2012-12-20T19:50:12.353 回答