Skip to content
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.

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

Focusing: focus/blur #282

Merged
merged 34 commits into from
Aug 16, 2023
Merged
Changes from 1 commit
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
259707b
Update article.md
shahrzadJavadiKoushesh Aug 7, 2023
14d4945
Update article.md
shahrzadJavadiKoushesh Aug 7, 2023
c9f0f84
Update article.md
shahrzadJavadiKoushesh Aug 7, 2023
27c60a9
Update article.md
shahrzadJavadiKoushesh Aug 7, 2023
840c88d
Update article.md
shahrzadJavadiKoushesh Aug 7, 2023
dce6b0d
Update article.md
shahrzadJavadiKoushesh Aug 7, 2023
be3c4c4
Update article.md
shahrzadJavadiKoushesh Aug 7, 2023
6ca9e97
Update article.md
shahrzadJavadiKoushesh Aug 7, 2023
853c973
Update article.md
shahrzadJavadiKoushesh Aug 7, 2023
d0167c6
Update article.md
shahrzadJavadiKoushesh Aug 7, 2023
259fc00
Update article.md
shahrzadJavadiKoushesh Aug 9, 2023
cb1e4e0
Update article.md
shahrzadJavadiKoushesh Aug 9, 2023
1b3128d
Update article.md
shahrzadJavadiKoushesh Aug 10, 2023
2b34867
Update article.md
shahrzadJavadiKoushesh Aug 11, 2023
a074ed2
Update article.md
shahrzadJavadiKoushesh Aug 11, 2023
747efb0
Update article.md
shahrzadJavadiKoushesh Aug 11, 2023
6a6e6d9
Update article.md
shahrzadJavadiKoushesh Aug 11, 2023
52cd9fc
Update article.md
shahrzadJavadiKoushesh Aug 11, 2023
99e31a7
Update article.md
shahrzadJavadiKoushesh Aug 11, 2023
8c516c2
Update article.md
shahrzadJavadiKoushesh Aug 11, 2023
7daec88
Update article.md
shahrzadJavadiKoushesh Aug 11, 2023
36fd6b7
Update article.md
shahrzadJavadiKoushesh Aug 11, 2023
49a483a
Update solution.md
shahrzadJavadiKoushesh Aug 12, 2023
d76b628
Update solution.md
shahrzadJavadiKoushesh Aug 12, 2023
eba88f5
Update task.md
shahrzadJavadiKoushesh Aug 12, 2023
75466a1
Update solution.md
shahrzadJavadiKoushesh Aug 12, 2023
6bd26a3
Update task.md
shahrzadJavadiKoushesh Aug 12, 2023
8d7ed09
Update task.md
shahrzadJavadiKoushesh Aug 13, 2023
aa41f27
Update task.md
shahrzadJavadiKoushesh Aug 14, 2023
b68bdfb
Update solution.md
shahrzadJavadiKoushesh Aug 14, 2023
2ce6f28
Update task.md
shahrzadJavadiKoushesh Aug 14, 2023
85f1072
Update article.md
shahrzadJavadiKoushesh Aug 14, 2023
be54b43
Update article.md
shahrzadJavadiKoushesh Aug 16, 2023
70fdf91
fix: remove an additional line
mahdiHash Aug 16, 2023
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
Prev Previous commit
Next Next commit
Update article.md
  • Loading branch information
shahrzadJavadiKoushesh committed Aug 11, 2023
commit 52cd9fc3403f077517d9037add347ccea3528daa
19 changes: 10 additions & 9 deletions 2-ui/4-forms-controls/2-focus-blur/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -167,32 +167,33 @@
<!-- را اضافه کنید class -- روی فرم focus در مورد -->

<form *!*onfocus="this.className='focused'"*/!*>
<input type="text" name="name" value="Name">
<input type="text" name="surname" value="Surname">
<input type="text" name="name" value="نام">
<input type="text" name="surname" value="نام خانوادگی">
</form>

<style> .focused { outline: 1px solid red; } </style>
```

The example above doesn't work, because when user focuses on an `<input>`, the `focus` event triggers on that input only. It doesn't bubble up. So `form.onfocus` never triggers.
مثال بالا کار نمی‌کند زیرا وقتی کاربر روی یک `<input>` فوکوس می‌کند، `focus` event فقط روی آن input فعال می‌شود. رفتار بالا رفتن حبابی ندارد. پس `form.onfocus` هیچوقت فعال نمی‌شود.
mahdiHash marked this conversation as resolved.
Show resolved Hide resolved

دو راه حل وجود دارد.

There are two solutions.
ابندا یک ویژگی قدیمی خنده‌دار وجود دارد: `focus/blur` بالا رفتن حبابی ندارند، بلکه در مرحله‌ی capturing به پایین منتشر می‌شوند.
mahdiHash marked this conversation as resolved.
Show resolved Hide resolved

First, there's a funny historical feature: `focus/blur` do not bubble up, but propagate down on the capturing phase.

This will work:
این کار می‌کند:

```html autorun height=80
<form id="form">
<input type="text" name="name" value="Name">
<input type="text" name="surname" value="Surname">
<input type="text" name="name" value="نام">
<input type="text" name="surname" value="نام خانوادگی">
</form>

<style> .focused { outline: 1px solid red; } </style>

<script>
*!*
// put the handler on capturing phase (last argument true)
//قرار دهید (آخرین آرگومان درست) capturing کنترلگر را روی فاز
form.addEventListener("focus", () => form.classList.add('focused'), true);
form.addEventListener("blur", () => form.classList.remove('focused'), true);
*/!*
Expand Down