From 259707b634227e620c3ba6032c3d651a0c5dcd09 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Mon, 7 Aug 2023 13:38:30 +0330 Subject: [PATCH 01/34] Update article.md --- 2-ui/4-forms-controls/2-focus-blur/article.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) 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 c253dc11d..e1cce3f7e 100644 --- a/2-ui/4-forms-controls/2-focus-blur/article.md +++ b/2-ui/4-forms-controls/2-focus-blur/article.md @@ -1,8 +1,9 @@ -# Focusing: focus/blur +# Focus: متمرکز کردن/محو کردن -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 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. +یک element وقتی focus دریافت می‌کند که کاربر روی آن click کند یا از کلید `key:Tab` در صفحه‌کلید استفاده کند. همچنین یک attribute به نام `autofocus` در HTML وجود دارد که وقتی صفحه load می‌شود، به صورت پیش‌فرض focus را روی یک element می‌گذارد و روش‌های دیگری برای دریافت focus. + +قرار دادن focus روی یک element به طور کلی یعنی: "آماده شدن برای دریافت داده در اینجا"، پس این وقتی است که می‌توانیم code را برای مقداردهی اولیه برای عملکرد مورد نیاز اجرا کنیم. 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. From 14d49450bcacf13f6b97da8991ee6dc42a7931ce Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Mon, 7 Aug 2023 13:52:00 +0330 Subject: [PATCH 02/34] Update article.md --- 2-ui/4-forms-controls/2-focus-blur/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 e1cce3f7e..cdc187993 100644 --- a/2-ui/4-forms-controls/2-focus-blur/article.md +++ b/2-ui/4-forms-controls/2-focus-blur/article.md @@ -3,11 +3,11 @@ یک element وقتی focus دریافت می‌کند که کاربر روی آن click کند یا از کلید `key:Tab` در صفحه‌کلید استفاده کند. همچنین یک attribute به نام `autofocus` در HTML وجود دارد که وقتی صفحه load می‌شود، به صورت پیش‌فرض focus را روی یک element می‌گذارد و روش‌های دیگری برای دریافت focus. -قرار دادن focus روی یک element به طور کلی یعنی: "آماده شدن برای دریافت داده در اینجا"، پس این وقتی است که می‌توانیم code را برای مقداردهی اولیه برای عملکرد مورد نیاز اجرا کنیم. +قرار دادن focus روی یک element به طور کلی یعنی: "آماده شدن برای دریافت داده در اینجا"، پس این زمانی است که می‌توانیم code را برای مقداردهی اولیه برای عملکرد مورد نیاز اجرا کنیم. -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. +لحظه‌ای که focus از دست می‌رود ("blur") حتی می‌تواند مهم‌تر باشد. آن وقتی است که کاربر روی جایی دیگر click می‌کند یا `key:Tab` را فشار می‌دهد تا به form بعدی برود یا راه‌های دیگری نیز وجود دارد. -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. +از دست دادن داده به طور کلی یعنی "داده وارد شده است"، پس ما می‌توانیم کد را اجرا کنیم تا آن را چک کنیم یا حتی آن را در server ذخیره کنیم و چیزهای دیگر. There are important peculiarities when working with focus events. We'll do the best to cover them further on. From c9f0f8434ed86f400f5c5cb6dc96a54eae0b8f06 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Mon, 7 Aug 2023 13:54:01 +0330 Subject: [PATCH 03/34] Update article.md --- 2-ui/4-forms-controls/2-focus-blur/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 cdc187993..21c5875f3 100644 --- a/2-ui/4-forms-controls/2-focus-blur/article.md +++ b/2-ui/4-forms-controls/2-focus-blur/article.md @@ -9,7 +9,7 @@ از دست دادن داده به طور کلی یعنی "داده وارد شده است"، پس ما می‌توانیم کد را اجرا کنیم تا آن را چک کنیم یا حتی آن را در server ذخیره کنیم و چیزهای دیگر. -There are important peculiarities when working with focus events. We'll do the best to cover them further on. +هنگام کار با focus eventها،‌ ویژگی‌های مهمی وجود دارند. ما در ادامه بیشترین تلاش خود را می‌کنیم تا آن‌ها را پوشش دهیم. ## Events focus/blur From 27c60a9e392a9344cf152f9c219db2bf8a04e2d7 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Mon, 7 Aug 2023 14:03:01 +0330 Subject: [PATCH 04/34] Update article.md --- 2-ui/4-forms-controls/2-focus-blur/article.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 21c5875f3..f37b90e30 100644 --- a/2-ui/4-forms-controls/2-focus-blur/article.md +++ b/2-ui/4-forms-controls/2-focus-blur/article.md @@ -13,14 +13,14 @@ ## Events focus/blur -The `focus` event is called on focusing, and `blur` -- when the element loses the focus. +هنگام متمرکز شده از `focus` استفاده می‌شود و `blur` -- برای زمانی که element آن focus را از دست می‌دهد. -Let's use them for validation of an input field. +بیایید برای اعتبارسنجی یک input field از آن‌ها استفاده کنیم. -In the example below: +در مثال زیر: -- The `blur` handler checks if the field has an email entered, and if not -- shows an error. -- The `focus` handler hides the error message (on `blur` it will be checked again): +- کنترل‌کننده‌ی `blur` چک می‌کند که یک email وارد شده است یا نه، و اگر نه -- یک error نشان می‌دهد. +- کنترل‌کننده‌ی `focus` پیام error را پنهان می‌کند (در حالت `blur` دوباره چک می‌شود): ```html run autorun height=60 -Your email please: +ایمیلتان لطفا:
``` -Modern HTML allows us to do many validations using input attributes: `required`, `pattern` and so on. And sometimes they are just what we need. JavaScript can be used when we want more flexibility. Also we could automatically send the changed value to the server if it's correct. +زبان HTML مدرن به ما اجازه می‌دهد که بسیاری از اعتبارسنجی‌ها را با input attributeها انجام دهیم: `required`، `pattern` و چیزهای دیگر. و بعضی وقت‌ها دقیقا چیزهایی هستند که ما نیاز داریم. وقتی که می‌خواهیم انعطاف‌پذیری بیشتری داشته باشیم، می‌توانیم از javascript استفاده کنیم. همچنین اگر داده درست باشد، ما می‌توانیم داده‌ی تغییرداده‌شده را به صورت خودکار به سرور بفرستیم ## Methods focus/blur From 6ca9e9717097a759912daada6373cd14d02a196a Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Mon, 7 Aug 2023 14:20:47 +0330 Subject: [PATCH 08/34] Update article.md --- 2-ui/4-forms-controls/2-focus-blur/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 f073d8d0f..405e409c0 100644 --- a/2-ui/4-forms-controls/2-focus-blur/article.md +++ b/2-ui/4-forms-controls/2-focus-blur/article.md @@ -50,10 +50,10 @@ ``` -زبان HTML مدرن به ما اجازه می‌دهد که بسیاری از اعتبارسنجی‌ها را با input attributeها انجام دهیم: `required`، `pattern` و چیزهای دیگر. و بعضی وقت‌ها دقیقا چیزهایی هستند که ما نیاز داریم. وقتی که می‌خواهیم انعطاف‌پذیری بیشتری داشته باشیم، می‌توانیم از javascript استفاده کنیم. همچنین اگر داده درست باشد، ما می‌توانیم داده‌ی تغییرداده‌شده را به صورت خودکار به سرور بفرستیم +زبان HTML مدرن به ما اجازه می‌دهد که بسیاری از اعتبارسنجی‌ها را با input attributeها انجام دهیم: `required`، `pattern` و چیزهای دیگر. و بعضی وقت‌ها دقیقا چیزهایی هستند که ما نیاز داریم. وقتی که می‌خواهیم انعطاف‌پذیری بیشتری داشته باشیم، می‌توانیم از javascript استفاده کنیم. همچنین اگر داده درست باشد، ما می‌توانیم داده‌ی تغییرداده‌شده را به صورت خودکار به سرور بفرستیم. -## Methods focus/blur +## متدهای focus/blur Methods `elem.focus()` and `elem.blur()` set/unset the focus on the element. From 853c97312bd5429c907dfb9739739c976cbd3246 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Mon, 7 Aug 2023 14:33:07 +0330 Subject: [PATCH 09/34] Update article.md --- 2-ui/4-forms-controls/2-focus-blur/article.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) 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 405e409c0..bee89dbba 100644 --- a/2-ui/4-forms-controls/2-focus-blur/article.md +++ b/2-ui/4-forms-controls/2-focus-blur/article.md @@ -55,9 +55,9 @@ ## متدهای focus/blur -Methods `elem.focus()` and `elem.blur()` set/unset the focus on the element. +تابع‌های `elem.focus()` و `elem.blur()` برای این هستند که focus را روی element فعال/غیرفعال کنند. -For instance, let's make the visitor unable to leave the input if the value is invalid: +برای مثال، بیایید کاری کنیم که اگر مقدار نامعتبر باشد، نتواند input را ترک کند: ```html run autorun height=80 -Your email please: - +ایمیلتان لطفا: + ``` -It works in all browsers except Firefox ([bug](https://bugzilla.mozilla.org/show_bug.cgi?id=53579)). +این روی تمام مرورگرها به جز Firefox کار می‌کند ([bug](https://bugzilla.mozilla.org/show_bug.cgi?id=53579)). If we enter something into the input and then try to use `key:Tab` or click away from the ``, then `onblur` returns the focus back. From 259fc00eb385667206ae5a3c05d2175b9e4d23e9 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Wed, 9 Aug 2023 18:07:07 +0330 Subject: [PATCH 11/34] Update article.md --- 2-ui/4-forms-controls/2-focus-blur/article.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 c08256167..1782a13b9 100644 --- a/2-ui/4-forms-controls/2-focus-blur/article.md +++ b/2-ui/4-forms-controls/2-focus-blur/article.md @@ -87,16 +87,16 @@ این روی تمام مرورگرها به جز Firefox کار می‌کند ([bug](https://bugzilla.mozilla.org/show_bug.cgi?id=53579)). -If we enter something into the input and then try to use `key:Tab` or click away from the ``, then `onblur` returns the focus back. +اگر چیزی را در input وارد کنیم و سپس سعی کنیم از `key:Tab` استفاده کنیم یا روی input کلیک کنیم، `onblur` فوکوس را برمی‌گرداند. -Please note that we can't "prevent losing focus" by calling `event.preventDefault()` in `onblur`, because `onblur` works *after* the element lost the focus. +لطفا توجه داشته باشید که ما نمی‌توانیم با فراخوانی `event.preventDefault()` از "از دست دادن focus" در `onblur` جلوگیری کنیم، چون `onblur` *پس از* اینکه عنصر 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. +اگرچه در عمل، قبل از اینکه چیزی مثل این را پیاده‌سازی کنیم،‌باید خوب فکر کنیم، چون به طور کلی *باید به کاربر error نمایش دهیم* اما *نباید مانع پیشرفت آن‌ها* در پر کردن form خودمان شویم. ممکن است آن‌ها بخواهند ابتدا fieldهای دیگر را پر کنند. ```warn header="JavaScript-initiated focus loss" -A focus loss can occur for many reasons. +ممکن است به دلایل مختلفی رخ دهد focus از دست رفتن -One of them is when the visitor clicks somewhere else. But also JavaScript itself may cause it, for instance: +:هم می‌تواند باعث آن شود. برای مثال javascript می‌کند اما خود click یکی از آن‌ها وقتی است که بازدیدکننده روی جای دیگری - An `alert` moves focus to itself, so it causes the focus loss at the element (`blur` event), and when the `alert` is dismissed, the focus comes back (`focus` event). - If an element is removed from DOM, then it also causes the focus loss. If it is reinserted later, then the focus doesn't return. From cb1e4e0827ce9ae67e3ee2b57280ea3e2ac696e5 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Wed, 9 Aug 2023 18:32:35 +0330 Subject: [PATCH 12/34] Update article.md --- 2-ui/4-forms-controls/2-focus-blur/article.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) 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 1782a13b9..d9d19f3a2 100644 --- a/2-ui/4-forms-controls/2-focus-blur/article.md +++ b/2-ui/4-forms-controls/2-focus-blur/article.md @@ -98,12 +98,13 @@ :هم می‌تواند باعث آن شود. برای مثال javascript می‌کند اما خود click یکی از آن‌ها وقتی است که بازدیدکننده روی جای دیگری -- An `alert` moves focus to itself, so it causes the focus loss at the element (`blur` event), and when the `alert` is dismissed, the focus comes back (`focus` event). -- If an element is removed from DOM, then it also causes the focus loss. If it is reinserted later, then the focus doesn't return. +(`focus` event) نادیده گرفته می‌شود، برمی‌گردد `alert` و وقتی که (`blur` event) در عنصر می‌شود focus فوکوس را به خودش منتقل می‌کند، پس باعث از بین رفتن `alert` یک - -These features sometimes cause `focus/blur` handlers to misbehave -- to trigger when they are not needed. +برگردانده نمی‌شود focus می‌شود. اگر آن بعدا دوباره وارد شود focus پاک شود، آنگاه آن هم باعث از بین رفتن DOM از element اگر یک - -The best recipe is to be careful when using these events. If we want to track user-initiated focus-loss, then we should avoid causing it ourselves. +.شوند trigger بدرفتاری کنند -- زمانی که نیاز نیست `focus/blurs` این ویژگی‌ها گاهی باعث می‌شوند - + +توسط کاربر را ردیابی کنیم، خودمان باید از ایجاد آن اجتناب کنیم. focus-loss مراقب باشید. اگر می‌خواهیم events بهترین دستورالعمل این است که موقع کار با این ``` ## Allow focusing on any element: tabindex From 1b3128d27434f12b8477521a36a49822b2b22504 Mon Sep 17 00:00:00 2001 From: Shahrzad Javadi Koushesh Date: Thu, 10 Aug 2023 22:56:22 +0330 Subject: [PATCH 13/34] Update article.md --- 2-ui/4-forms-controls/2-focus-blur/article.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 d9d19f3a2..6521dd1af 100644 --- a/2-ui/4-forms-controls/2-focus-blur/article.md +++ b/2-ui/4-forms-controls/2-focus-blur/article.md @@ -106,9 +106,9 @@ توسط کاربر را ردیابی کنیم، خودمان باید از ایجاد آن اجتناب کنیم. focus-loss مراقب باشید. اگر می‌خواهیم events بهترین دستورالعمل این است که موقع کار با این ``` -## Allow focusing on any element: tabindex +## اجازه focus کردن روی هر عنصری را می‌دهد: tabindex -By default, many elements do not support focusing. +به صورت پیش‌فرض، بیشتر عناصر از focus پشتیبانی نمی‌کنند. 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: `