Question

我有一个id ='scanTable'的动态表。调用以下函数时，会向表中添加一个新行，并在新行的第一个元素上设置焦点。它完美适用于第一行，但是每个后续行，焦点都转到地址栏。该函数需要通过行中最后一个元素的Tab键来触发。

function addNewRow() {
    elementName = inputType + '_' + rowCounter;
    var newRow = '<tr><td>' + rowCounter + '</td><td><input name="' + elementName + '" type="text" id="' + elementName + '" ></td><td><input type="text" name="serial_' + rowCounter + '" id="serial_' + rowCounter + '" onBlur="serialBlur()"></td></tr>';    
    $('#scanTable tr:last').after(newRow);
    $('#' + elementName).focus();
    //document.getElementById(elementName).focus();
    // for testing, value is being set
    $('#' + elementName).val(elementName); 
    rowCounter++;
}

fiddle

Answer 1

我无法假设一切，但对我来说，以下代码正在运行。其中rowCounter和inputType是全局变量。

function addNewRow() {
    elementName = inputType + '_' + rowCounter;
    var newRow = '<tr><td>' + rowCounter + '</td><td><input name="' + elementName + '" type="text" id="' + elementName + '" ></td><td><input type="text" name="serial_' + rowCounter + '" id="serial_' + rowCounter + '" onBlur="serialBlur()"></td></tr>';    
    $('#scanTable tr:last').after(newRow);
    $('#' + elementName).focus();
    $('#' + elementName).val(elementName); 
    rowCounter++;
}

See it in Action

在这个演示中，焦点始终是新行的第一个元素。

Answer 2

您必须禁用串行输入的标签行为

function addNewRow() {
    elementName = inputType + '_' + rowCounter;
    var newRow = '<tr><td>' + rowCounter + '</td><td><input name="' + elementName + '" type="text" id="' + elementName + '" ></td><td><input type="text" name="serial_' + rowCounter + '" id="serial_' + rowCounter + '"></td></tr>';    
    $('#scanTable tr:last').after(newRow);
    $('#serial_' + rowCounter).on('keydown', function(e) {
    if(e.which == 9) { e.preventDefault();addNewRow();}
    });
    $('#' + elementName).focus();
    //document.getElementById(elementName).focus();
    // for testing, value is being set
    $('#' + elementName).val(elementName); 
    rowCounter++;
}

https://jsfiddle.net/99fdtLqt/3/

jquery焦点表演奇怪，只有第一次工作

2 个答案: