聚焦到 HTML 页面的图像答案

【问题标题】：Focus to an image of a HTML page聚焦到 HTML 页面的图像
【发布时间】：2014-04-17 11:52:19
【问题描述】：

我有 4 张图片，当我点击它们时，它们会在图片下方显示信息，当我点击最后一张图片时，图片会在页面下方，以及何时加载包含该信息的新页面时，我必须使用滚动条向下查看图像和最后一张图像的信息。

我想在新页面加载时将焦点放在最后一张图片上。

我这样做了，但它不起作用：

<script>
function setFocusToTextBox(){
    document.getElementById("abc").focus();
}
</script>

<img src="images/Practidose.fw.png" alt="" width="770" height="150" id="abc" onclick="setFocusToTextBox()"/>

4 张图片的图片，当我点击最后一张时，我想在新页面加载时聚焦该图片：

【问题讨论】：

标签： javascript html image focus

【解决方案1】：

.focus() 通常只能应用于链接或表单输入。

但是，您可以通过为元素赋予tabindex 属性来在任意元素上使用它。

如果您想使用onClick 处理程序，出于可访问性原因，这通常是一个好主意，因为这将有助于键盘导航和其他可访问性工具了解您的元素应该是可点击的。

【讨论】：

值得注意的是，您可以给元素tabindex="0" 以使其具有焦点，这不需要您为每个其他元素指定实际值！

【解决方案2】：

我不完全确定您为什么要聚焦您所在的图像，但请尝试

function setFocusToTextBox(){
    document.getElementById("abc").scrollIntoView();
}

如果加载：

window.onload=function(){
    document.getElementById("abc").scrollIntoView();
}

【讨论】：