Best way to blur all inputs on page?

Question

I am trying to blur all the inputs on the page, to show error styling. I am trying to follow this blur documentation.

My attempt is to grab all the inputs and then apply blur...

document.querySelectorAll('input').blur();

But I simply get the error, blur is not a function. What is the correct approach?

https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return — epascarello, Jul 01 '20 at 15:46

score 2 · Accepted Answer · answered Jul 01 '20 at 15:43

2

First, there is no point un bluring more than one input element : only one can have focus at a time, so only one can "blur" at a time.

But for the sake of the example, here is how it could be achieved:

document.querySelectorAll('input') returns an array-like object, so:

Array.from(document.querySelectorAll('input')).forEach(el => el.blur())

answered Jul 01 '20 at 15:43

laruiss

The point for me was to trigger a code that was adding visual cues what fields are invalid, without me knowing where that code is or how it works. This answer was correct +1 – Stevo Ilišković Jun 05 '23 at 13:19

1 Answers1