jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Merge pull request #273 from xterminal/patch-1

Browse source 
Update article.md
This commit is contained in:
Ilya Kantor 2017-11-01 10:44:26 +03:00 • committed by GitHub
commit 4aa190b102
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
2-ui/4-forms-controls/2-focus-blur/article.md
View file

@ -4,9 +4,9 @@ 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. 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. There are important peculiarities when working with focus events. We'll do the best to cover them here.
@ -14,7 +14,7 @@ There are important peculiarities when working with focus events. We'll do the b
## Events focus/blur ## 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. Let's use them for validation of an input field.
@ -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. 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" ```warn header="JavaScript-initiated focus loss"
A focus loss can occur for many reasons. A focus loss can occur for many reasons.
@ -214,7 +214,7 @@ So here's another working variant:
## Summary ## 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: Their specials are:
- They do not bubble. Can use capturing state instead or `focusin/focusout`. - They do not bubble. Can use capturing state instead or `focusin/focusout`.