You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/4-forms-controls/2-focus-blur/article.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Focusing: focus/blur
2
2
3
-
An element receives a focus when the user either clicks on it or uses the `key:Tab` key on the keyboard. There's also an `autofocus` HTML attribute that puts the focus into an element by default when a page loads and other means of getting a focus.
3
+
An element receives the focus when the user either clicks on it or uses the `key:Tab` key on the keyboard. There's also an `autofocus` HTML attribute that puts the focus onto an element by default when a page loads and other means of getting the focus.
4
4
5
5
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.
6
6
@@ -18,7 +18,7 @@ Let's use them for validation of an input field.
18
18
19
19
In the example below:
20
20
21
-
- The `blur` handler checks if the field the email is entered, and if not -- shows an error.
21
+
- The `blur` handler checks if the field has an email entered, and if not -- shows an error.
22
22
- The `focus` handler hides the error message (on `blur` it will be checked again):
23
23
24
24
```html run autorun height=60
@@ -108,7 +108,7 @@ By default many elements do not support focusing.
108
108
109
109
The list varies a bit between browsers, but one thing is always correct: `focus/blur` support is guaranteed for elements that a visitor can interact with: `<button>`, `<input>`, `<select>`, `<a>` and so on.
110
110
111
-
From the other hand, elements that exist to format something, such as `<div>`, `<span>`, `<table>` -- are unfocusable by default. The method `elem.focus()` doesn't work on them, and `focus/blur` events are never triggered.
111
+
On the other hand, elements that exist to format something, such as `<div>`, `<span>`, `<table>` -- are unfocusable by default. The method `elem.focus()` doesn't work on them, and `focus/blur` events are never triggered.
112
112
113
113
This can be changed using HTML-attribute `tabindex`.
114
114
@@ -131,7 +131,7 @@ There are two special values:
131
131
For instance, here's a list. Click the first item and press `key:Tab`:
132
132
133
133
```html autorun no-beautify
134
-
Click the first item and press Tab. Keep track of the order. Please note that many subsequent Tabs can move the focus out of the iframe with the example.
134
+
Click the first item and press Tab. Keep track of the order. Please note that many subsequent Tabs can move the focus out of the iframe in the example.
135
135
<ul>
136
136
<litabindex="1">One</li>
137
137
<litabindex="0">Zero</li>
@@ -216,7 +216,7 @@ So here's another working variant:
216
216
217
217
## Summary
218
218
219
-
Events `focus` and `blur` trigger on focusing/losing focus on the element.
219
+
Events `focus` and `blur` trigger on an element focusing/losing focus.
220
220
221
221
Their specials are:
222
222
- They do not bubble. Can use capturing state instead or `focusin/focusout`.
0 commit comments