Javascript -无法将焦点设置为动态创建的文本框

eblbsuwk  于 2023-03-11  发布在  Java
关注(0)|答案(1)|浏览(131)

问题:
我正在开发一个基于JavaScript的Web应用程序。该应用程序有一个功能,用户可以点击一行来更新详细视图。详细视图包含一个输入框,该框在更新后应该会获得焦点,但焦点没有被设置。
问题:
单击行后,如何将焦点设置在输入框上?是否还有其他方法我没有尝试过?
我尝试了几种解决方案来设置输入框上的焦点,包括:
1.将输入框设置为自动对焦。
1.使用文档.querySelector和元素.focus()。
1.从页面中移除除输入框之外的所有其他可聚焦元素。
1.使用setTimeout等待页面完全加载后再设置焦点。
1.设置焦点前检查提示控制中心的状态。
1.向输入框添加tabindex=0和显示属性。
但是,这些解决方案都不起作用。输入框在日志中看起来有焦点,但实际上在页面上没有焦点。按Tab键可以正确设置焦点,但这不是可接受的解决方案。

0sgqnhkj

0sgqnhkj1#

让“click”事件将焦点设置到某个地方 * 而不是被点击的元素 * 的一般问题是,作为其正常行为的一部分,点击本身会改变焦点状态。即使你点击了文本之类的东西(也就是说,不是另一个输入或按钮或其他东西),如果你在处理程序中改变它,点击也会转移焦点。
我的理性思维认为,防止“点击”时的默认操作应该会起作用,但我得到的结果喜忧参半。可能是我的负面体验是很久以前的事了,所以值得一试。然而,我以前的备用方法是在类似超时处理程序的东西中执行所需的焦点设置。(解析的Promise处理程序也应该起作用。)所以:

const target = document.getElementById("something");
something.addEventListener("click", function(ev) {
    setTimeout(function() {
      document.getElementById("desired-focus").focus();
    }, 1);
});

通过在一个超时处理程序中执行此操作,它只在整个“单击”过程完成后发生,用户不会注意到延迟。

相关问题