diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/my.css b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/my.css index 67905e6d6..bf3d4ff6a 100644 --- a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/my.css +++ b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/solution.view/my.css @@ -20,6 +20,6 @@ } .edit:focus { - outline: none; /* remove focus border in Safari */ + outline: none; } diff --git a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/my.css b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/my.css index 67905e6d6..bf3d4ff6a 100644 --- a/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/my.css +++ b/2-ui/4-forms-controls/2-focus-blur/3-editable-div/source.view/my.css @@ -20,6 +20,6 @@ } .edit:focus { - outline: none; /* remove focus border in Safari */ + outline: none; } diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/my.css b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/my.css index d7f2a4424..8d0c3b4ec 100644 --- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/my.css +++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/solution.view/my.css @@ -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 { diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md index 2c5c73cd3..4d1682176 100644 --- a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md +++ b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/solution.md @@ -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. diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md index 2d11a5003..c253dc11d 100644 --- a/2-ui/4-forms-controls/2-focus-blur/article.md +++ b/2-ui/4-forms-controls/2-focus-blur/article.md @@ -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 @@ -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. @@ -208,7 +210,6 @@ So here's another working variant: