Question

0

111

Vistas

How to set focus on an image on page load

Is there a way to set the focus on an on page load? I have found documentation stating to use the autofocus attribute but the documentation says that attribute only applies to input, button, textarea, and select.

Thanks.

8 months ago · Juan Pablo Isaza

3 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-06-24T17:52:14.554Z

You can try scrollIntoView method on window onload

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

Answer 2 · 2022-06-24T17:52:14.564Z

I think you looking for something like that:

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

Answer 3 · 2022-06-24T17:52:14.572Z

What you could do is search for the img element with the autofocus attribute and set the focus after the DOM is read. You also need to set the tabindex to get that working.

I would only search for img[autofocus] so that you don't mess too much around with the default behavior.

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">