Question

我正在处理用户输入页面，该页面应允许快速输入数据。计算机上附有条形码扫描器，可将代码+ chr（13）发送到突出显示的输入字段。

我想要做的是扫描条形码，搜索数据库，找到条形码后，输入数据并转到下一行。

代码工作正常，焦点设置为新元素。但是，看起来Ajax调用正在将焦点窃回到调用元素。我该如何解决这个问题？

这是完整的JavaScript代码：

$(document).ready(function() {

  function newTableRow(e) {
    var keyCode = e.keyCode;
    if (keyCode !== 9) return;

    if ($(e.delegateTarget).parent().is(':last-child')) {
      addTableRow();
    }
  }

  function addTableRow() {
    $('#tblData > tbody tr:last').after(`<tr>
                            <td><input type=\"text\" size=\"20\" name=\"ean\" /></td>
                            <td><input type=\"text\" size=\"20\" name=\"key\" /></td>
                            <td><input type=\"text\" size=\"40\" name=\"title\" /></td>
                        </tr>`);

    // Re-bind the events to the new tablerow
    $('#tblData > tbody tr td:last').on('keydown', 'input', null, addTableRow);
    $('#tblData > tbody tr td').on('keydown', 'input', null, searchDB);
    // Set focus to first element for keyboard input
    $('#tblData > tbody tr:last td:first').focus();
  }

  function searchDB(e) {
    var keyCode = e.keyCode;
    if (keyCode !== 13) return;

    var value = $(e.target).val();
    var tablerow = $(e.target).closest('tr');
    var addrow = false;

    $.ajax({
        cache: false,
        type: "GET",
        url: "searcharticles.php",
        dataType: "xml",
        data: {
          search_param: value
        }
      })
      .done(function(xml) {
        var id = 0;

        $(xml).find('artikel').each(function() {
          id = $(this).find('id').text();
          if (id == -1) {
            tablerow.find('td input:eq(2)').val('Not found');
          } else {
            tablerow.find('td input:eq(1)').val($(this).find('key').text());
            tablerow.find('td input:eq(2)').val($(this).find('title').text());
            addrow = true;
          }
        });
      })
      .fail(function(xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
      })
      .always(function() {
        if (addrow && $(e.delegateTarget).parent().is(':last-child')) {
          addTableRow();
        }
      });
  }

  $('#tblData > tbody tr td:last').on('keydown', 'input', null, newTableRow);
  $('#tblData > tbody tr td').on('keydown', 'input', null, searchDB);

});

Answer 1

只需将其放在.done()回调的末尾，而不是在Ajax请求之前。

// Set focus to first element for keyboard input
$('#tblData > tbody tr:last td:first').focus();

Ajax是异步的。

由于在Ajax发送后几英寸.done()内存在一些DOM操作，focus()可能会丢失。聚焦input以准备用户进行其他操作应该是最后要完成的操作。

我看不出这种行为的其他原因。

Answer 2

不是100％确定为什么这是一个答案，但是如果我为新表格行的第一个TD分配一个ID并将焦点设置为该值，那么它就可以了。

如果我为表行分配ID并将焦点设置为该ID和TD：首先，它不起作用。那里古怪的东西在那里。如果有人可以澄清，我会打开这个问题，但这是一种解决问题的方法。

在Ajax调用后设置焦点

2 个答案: