英文:
Javascript — unable to set focus to a dynamically created textbox
问题
Problem:
我正在开发一个基于JavaScript的Web应用程序。该应用程序具有一个功能，用户可以单击一行以更新详细视图。详细视图包含一个应该在更新后获得焦点的输入框，但焦点没有被设置。
Question:
我应该怎么做才能在单击行后将焦点设置到输入框上？还有其他方法吗，我还没有尝试过？
I've tried several solutions to set the focus on the input box, including:
- 将输入框设置为自动获取焦点。
- 使用document.querySelector和element.focus()。
- 从页面中删除除输入框之外的所有其他可获取焦点的元素。
- 使用setTimeout等待页面完全加载后再设置焦点。
- 在设置焦点之前检查提示控制中心的状态。
- 为输入框添加tabindex=0和display属性。
然而，这些解决方案都没有起作用。在日志中，输入框似乎具有焦点，但实际上在页面上没有焦点。按下Tab键可以正确设置焦点，但这不是可接受的解决方案。
英文:
Problem:
I'm working on a JavaScript-based web application. The app has a feature where users can click on a row to update a detail view. The detail view contains an input box that should receive focus after the update, but the focus is not being set.
Question:
What can I do to set the focus on the input box after clicking the row? Are there any other methods that I haven't tried?
I've tried several solutions to set the focus on the input box, including:
- Setting the input box to autofocus.
- Using document.querySelector and element.focus().
- Removing all other focusable elements from the page except for the input box.
- Using setTimeout to wait for the page to load fully before setting focus.
- Checking the state of the prompt control center before setting focus.
- Adding tabindex=0 and display properties to the input box.
However, none of these solutions have worked. The input box appears to have focus in the logs, but it does not actually have focus on the page. Pressing the tab key sets the focus correctly, but this is not an acceptable solution.
答案1
得分: 1
使用“单击”事件将焦点设置到除单击元素以外的其他地方的一般问题是，单击本身将作为其正常行为的一部分更改焦点状态。即使单击某些文本之类的东西（即不是另一个输入框或按钮之类的东西），如果在处理程序中更改它，单击也会转移焦点。
我的理性思维表明，阻止“单击”上的默认操作应该有效，但我的经验却有好坏参半。这可能是因为我很久以前有一次不好的经历，所以这值得一试。然而，我一直以来的方法是在类似超时处理程序中执行所需的焦点设置。（已解决的Promise处理程序也应该有效。）所以：
const target = document.getElementById("something");
something.addEventListener("click", function(ev) {
setTimeout(function() {
document.getElementById("desired-focus").focus();
}, 1);
});
通过在超时处理程序中执行，它仅在整个“单击”过程完成后发生。用户不会注意到这个延迟。
英文:
The general problem with having a "click" event set focus to somewhere other than the clicked-on element is that the click itself will, as part of its normal behavior, alter the focus state. Even if you click on something like text (that is, not another input or button or whatever) the click will divert focus if you change it in the handler.
My rational mind suggests that preventing the default action on the "click" should work, but I've had mixed results. It could be that my negative experience was a very long time ago, so that is worth a try. My old standby method however is to perform the desired focus setting in something like a timeout handler. (A resolved Promise handler should work too.) So:
const target = document.getElementById("something");
something.addEventListener("click", function(ev) {
setTimeout(function() {
document.getElementById("desired-focus").focus();
}, 1);
});
By doing it in a timeout handler, it happens only after the whole "click" process has finished. The delay won't be noticed by the user.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论