jQuery动态添加input文本框后无法设置焦点问题排查

问题根因 #

• 扫描枪完成输入后自动触发的tab键存在默认跳转行为：会将焦点自动移到页面下一个可聚焦元素，该行为的执行时机晚于你在change事件中设置的聚焦逻辑，会覆盖你手动设置的焦点。加断点时程序暂停，恢复运行时tab默认行为已经执行完毕，所以此时聚焦逻辑可以正常生效。
• 变量vCnt未使用let/const声明，存在全局变量污染风险，多次触发时可能出现计数异常。

修复代码 #

直接使用如下优化后的jQuery代码即可：

$(document).ready(function(){
  $('#i1').focus();
  // 捕获扫描枪触发的tab键，阻止默认跳转行为
  $('tbody').on('keydown', ':input', function(e) {
    if(e.key === 'Tab' || e.keyCode === 9) {
      e.preventDefault();
    }
  });
  // 输入变更逻辑
  $('tbody').on('change', ':input', function() {
    const vCnt = Number($(this).attr('cnt')) + 1;
    $('#tablerep tbody').append(`<tr class="trow"><td><input class="input-mini" id="i${vCnt}" cnt="${vCnt}" type="text"/></td></tr>`);
    // 直接对新输入框聚焦，无需额外延时
    $(`#i${vCnt}`).focus();
  });
});

补充说明 #

如果你的页面存在其他异步渲染逻辑，依然出现聚焦失效的情况，可以把聚焦逻辑包一层requestAnimationFrame，确保元素已经完全渲染到DOM中后再执行聚焦：

requestAnimationFrame(() => {
  $(`#i${vCnt}`).focus();
});

内容的提问来源于stack exchange，提问作者Matth