از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
در جاوا اسکریپت، focus() متد یک ابزار frontend است که به ما امکان می دهد تمرکز را تنظیم کنیم روی یک عنصر خاص در DOM با این حال، مواقعی وجود دارد که به نظر می رسد این روش آنطور که انتظار می رود کار نمی کند.
این بایت کوتاه شما را از طریق برخی از مشکلات رایج و “مشکلات” که ممکن است باعث ایجاد این مشکل شوند، راهنمایی می کند focus() روش شکست و ارائه راه حل
ابزار Dev خود را بررسی کنید
اولین قدم در عیب یابی الف focus() مشکل بررسی Dev Tools Console مرورگر شماست. در اینجا، شما باید بتوانید هر پیام خطایی مرتبط با کد خود را پیدا کنید. برای باز کردن console در اکثر مرورگرها می توانید از Ctrl+Shift+J (ویندوز/لینوکس) یا Cmd+Opt+J میانبرهای صفحه کلید (Mac).
document.getElementById('nonexistent').focus();
اگر عنصر وجود نداشته باشد، خطای زیر را مشاهده خواهید کرد:
Uncaught TypeError: Cannot read property 'focus' of null
این خطا به ما می گوید که جاوا اسکریپت شما در تلاش است تمرکز کند روی عنصری که در DOM وجود ندارد.
آشنایی با عناصر قابل تمرکز در جاوا اسکریپت
توجه داشته باشید: همه عناصر در جاوا اسکریپت نمی توانند فوکوس دریافت کنند. فقط عناصر خاصی که به عنوان عناصر «قابل تمرکز» شناخته می شوند، می توانند موضوع تمرکز باشند.
لیست عناصر قابل تمرکز شامل <button>، <input>، <select>، <textarea>، <a> با href یا tabindexو هر عنصر دیگری با tabindex ویژگی. اگر سعی می کنید تمرکز کنید روی عنصری که قابل تمرکز نیست، focus() روش کار نخواهد کرد
document.getElementById('div').focus();
اگر div عنصر a ندارد tabindex ویژگی، روش تمرکز کار نخواهد کرد.
از دید عناصر هدف اطمینان حاصل کنید
یکی دیگر از مشکلات رایج که ممکن است مانع از focus() روش کار، رویت عنصر هدف است. عنصر هدف باید قابل مشاهده باشد (یعنی با CSS پنهان نشود) و در نمای فعلی باشد.
توجه داشته باشید: یک عنصر پنهان شده با CSS (display: none یا visibility: hidden) یا در خارج از نما قرار گرفته باشد، نمی تواند فوکوس را دریافت کند.
document.getElementById('hiddenElement').focus();
اگر عنصر پنهان باشد، focus() روش کار نخواهد کرد
بررسی کنید که آیا Focusable است یا خیر
با توجه به آنچه تاکنون آموخته ایم، می توانیم تابعی ایجاد کنیم که به ما کمک می کند بررسی کنیم که آیا یک عنصر قابل تمرکز است یا خیر. اگر از قبل نمی‌دانید روی چه عنصری تمرکز می‌کنیم، این کار مفید خواهد بود روی. تابع ممکن است به شکل زیر باشد:
function isFocusable($elem) {
if ($elem.is(":hidden") || $elem.is(":disabled")) {
return false;
}
var tabIndex = +$elem.attr("tabindex");
tabIndex = isNaN(tabIndex) ? -1 : tabIndex;
return $elem.is(":input, a(href), area(href), iframe") || tabIndex > -1;
}
تابع بالا از اقتباس شد این پاسخ SO.
نتیجه
این focus() متد در جاوا اسکریپت یک ابزار مفید برای هدایت تعامل کاربر است، اما گاهی اوقات ممکن است به دلیل مشکلاتی مانند عناصر غیرقابل تمرکز یا غیرقابل تمرکز، یا مشکلات دید، شکست بخورد. با بررسی برگه Dev Tools Console خود برای وجود خطا، درک اینکه کدام عناصر می توانند فوکوس دریافت کنند، و اطمینان از اینکه عناصر هدف شما قابل مشاهده هستند و در داخل viewport هستند، می توانید اکثر مشکلات را با focus() روش مطابق انتظار کار نمی کند
منتشر شده در 1402-12-31 12:27:03
