Skip to content

Update article.md #273

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iliakan merged 1 commit into from
Nov 1, 2017
Merged

Update article.md #273

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions 2-ui/4-forms-controls/2-focus-blur/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@ An element receives a focus when the user either clicks on it or uses the `key:T

Focusing generally means: "prepare to accept the data here", so that's the moment when we can run the code to initialize or load something.

The moment of loosing the focus ("blur") can be even more important. That's when a user clicks somewhere else or presses `key:Tab` to go to the next form field, or there are other means as well.
The moment of losing the focus ("blur") can be even more important. That's when a user clicks somewhere else or presses `key:Tab` to go to the next form field, or there are other means as well.

Loosing 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.
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 here.

[cut]

## Events focus/blur

The `focus` event is called on focusing, and `blur` -- when the element looses the focus.
The `focus` event is called on focusing, and `blur` -- when the element loses the focus.

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

Expand Down Expand Up @@ -90,7 +90,7 @@ It works in all browsers except Firefox ([bug](https://bugzilla.mozilla.org/show

If we enter something into the input and then try to use `key:Tab` or click away from the `<input>`, then `onblur` returns the focus back.

Please note that we can't "prevent loosing focus" by calling `event.preventDefault()` in `onblur`, because `onblur` works *after* the element lost the focus.
Please note that we can't "prevent losing focus" by calling `event.preventDefault()` in `onblur`, because `onblur` works *after* the element lost the focus.

```warn header="JavaScript-initiated focus loss"
A focus loss can occur for many reasons.
Expand Down Expand Up @@ -214,7 +214,7 @@ So here's another working variant:

## Summary

Events `focus` and `blur` trigger on focusing/loosing focus on the element.
Events `focus` and `blur` trigger on focusing/losing focus on the element.

Their specials are:
- They do not bubble. Can use capturing state instead or `focusin/focusout`.
Expand Down