如何在页面加载时对图像设置焦点

Question

是否有办法将焦点设置在页面加载上?我找到了说明使用autofocus属性的文档，但文档说该属性仅适用于input,button,textarea和select。

谢谢。

Answer 1

您可以在window onload上尝试scrollIntoView方法

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

Answer 2

我想你在找这样的东西:

window.addEventListener('load', function() {
document.querySelector(".classFromImage").focus();
})

Answer 3

您可以做的是搜索具有autofocus属性的img元素，并在读取DOM后设置焦点。您还需要设置tabindex以使其工作。

我只会搜索img[autofocus]，这样你就不会在默认行为上搞得太乱了。

window.addEventListener('DOMContentLoaded', function() {
let elm = document.querySelector("img[autofocus]")
if (elm) {
elm.focus()
}
})

img {
width: 100px;
height: 100px;
display: inline-block;
}
:focus {
border: 4px solid red;
}

<img autofocus tabindex="0">

Answer 4

您可以通过添加tabindex="0"属性，并在js中使用focus()方法。

<img class="focusable" tabindex="0" src="#"/>

window.addEventListener('load', function() {
document.querySelector(".focusable").focus();
})