将焦点移到页面元素[重复]答案

【问题标题】：Move focus to page element [duplicate]将焦点移到页面元素[重复]
【发布时间】：2012-08-31 18:31:53
【问题描述】：

可能重复：
Move focus to a particular field

这应该很容易。我正在尝试将焦点 onclick 设置为我页面上的 <p> 元素。

我的 javascript 看起来像这样：

function loadSubmit() {
    if (document.getElementById('uploaded_file').value == "") {
        this.setFocus("name");
    } else {
        var ProgressImage = document.getElementById('progress_image');
        document.getElementById("progress").style.visibility = "visible";
      //document.getElementById("progress").focus(); ?
        setTimeout(function () {
            ProgressImage.src = ProgressImage.src
        }, 100);
    }
}

我想将页面的焦点转移到“progress_image”关于如何完成此操作的任何建议？

谢谢

【问题讨论】：

“设置焦点”是什么意思？您的意思是让页面滚动到那里以便用户看到？
@rlemon 也许问题是我试图将焦点移到的不是输入字段，而是
?
stackoverflow.com/questions/6754275/… 无论哪种方式 - 这些问题确实存在。你只需要一点 Google-Fu
@rlemon 是的，确实是 Google-Fu，只是需要帮助才能提出正确的问题。谢谢，我相信这个链接会有所帮助。

标签： javascript focus

【解决方案1】：

感谢@rlemon 为我指明了正确的方向。对于那些遇到这篇文章寻求与我相同答案的人；我的解决方案如下。

如果您需要使用 onclick 事件将焦点设置到页面上的元素，您可以通过使用 tabindex 和 ID 定义元素来实现。

例如我有：

<div id="whatever">sometext or whatever</div>

我希望通过提交按钮或类似按钮来关注该 div。我们已经知道这可以通过使用其他海报所建议的方法来完成输入字段：

document.getElementById("whatever").focus();

像这样对您的 div 进行简单的更改：

<div id="whatever" tabindex="-1">sometext or whatever</div>

您的 div 将通过您的 onclick 事件进入页面的焦点。现在知道了这一点，只需在页面上放置一个空的 div、锚点或其他任何东西，即可获得所需的结果，从而设置适当的焦点。

我希望这对其他人有所帮助，并再次感谢其他帮助我解决此问题的海报，包括： http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex/

【讨论】：

仅添加负标签索引就这么简单，令人震惊！ +1！

【解决方案2】：

您可以在此处查看有关 focus 函数的更多信息：https://developer.mozilla.org/en-US/docs/DOM/element.focus

document.getElementById('fieldId').focus();

【讨论】：

请不要派人去 w3schools... 而是选择 developer.mozilla.org/en-US/docs/DOM/element.focus MDN 或类似的东西。
更新了链接，非常感谢您的建议。我一定不会再链接到 w3schools =)
出于某种原因阅读w3fools.com。他们的“假”认证和误导性信息也可能会引发一些危险信号:)
真的吗？哇。好吧，一旦我下班回家，我肯定会阅读更多有关该内容的信息。我一点头绪都没有。再次感谢 +1 让我知道！

【解决方案3】：

document.getElementById('progress_image').focus();

【讨论】：