Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@
}

.edit:focus {
outline: none;
/* remove focus border in Safari */
outline: none;
}
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@
}

.edit:focus {
outline: none;
/* remove focus border in Safari */
outline: none;
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,15 @@
margin: 0;
padding: 0;
display: block;
resize: none;

/* remove resizing handle in Firefox */
resize: none;

outline: none;
/* remove outline on focus in Chrome */
outline: none;

overflow: auto;
/* remove scrollbar in IE */
overflow: auto;
}

.edit-controls {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@

We can use `mouse.onclick` to handle the click and make the mouse "moveable" with `position:fixed`, then then `mouse.onkeydown` to handle arrow keys.
We can use `mouse.onclick` to handle the click and make the mouse "moveable" with `position:fixed`, then `mouse.onkeydown` to handle arrow keys.

The only pitfall is that `keydown` only triggers on elements with focus. So we need to add `tabindex` to the element. As we're forbidden to change HTML, we can use `mouse.tabIndex` property for that.

Expand Down
7 changes: 4 additions & 3 deletions 2-ui/4-forms-controls/2-focus-blur/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@

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.

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 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 `key:Tab` 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 here.
There are important peculiarities when working with focus events. We'll do the best to cover them further on.

## Events focus/blur

Expand Down Expand Up @@ -90,6 +90,8 @@ If we enter something into the input and then try to use `key:Tab` or click away

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

In practice though, one should think well, before implementing something like this, because we generally *should show errors* to the user, but *should not prevent their progress* in filling our form. They may want to fill other fields first.

```warn header="JavaScript-initiated focus loss"
A focus loss can occur for many reasons.

Expand Down Expand Up @@ -208,7 +210,6 @@ So here's another working variant:

<script>
*!*
// put the handler on capturing phase (last argument true)
form.addEventListener("focusin", () => form.classList.add('focused'));
form.addEventListener("focusout", () => form.classList.remove('focused'));
*/!*
Expand Down