Onblur react

An element receives the focus when the user either clicks on it or uses the key on the keyboard.

Focus and blur events in javascript

There’s also an HTML attribute that puts the focus onto an element by default when a page loads and other means of getting the focus.

Focusing on an element generally means: “prepare to accept the data here”, so that’s the moment when we can run the code to initialize the required functionality.

The moment of losing the focus (“blur”) can be even more important.

That’s when a user clicks somewhere else or presses to go to the next form field, or there are other means as well.

Losing the focus generally means: “the data has been entered”, so we can run the code to check it or even to save it to the server and so on.

There are important peculiarities when working with focus events.

We’ll do the best to cover them further on.

Events focus/blur

The event is called on focusing, and – when the element loses the focus.

Let’s use them for validation of an input field.

In the example below:

• The handler checks if the field has an email entered, and if not – shows
  what is onblur in javascript
  blur js