將重點放在生成的文本字段上

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

完整的click事件綁定如下所示：

$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作為選擇恕我直言。 高溫超導

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

只需引用新元素，然后也應用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 ，並將其分配給某個位置的變量，因此您也可以引用新創建的元素。