للحصول على تجربة مستخدم جيدة ، تعتبر إمكانية الوصول إلى موقع الويب/تطبيق الويب ، بالإضافة إلى الوظائف أمرًا بالغ الأهمية.
عندما يكون موقع الويب الخاص بنا يعمل بشكل جيد/تجربة جيدة ، فإن المستخدمين ليسوا على دراية به ، لكنهم بالتأكيد سيشعرون به عندما لا نكون على ما يرام. جزء مهم من توافر التطبيق وسهولة الوصول إليه هو معالجة تركيز المدخلات ، ولكن هذه نقطة أخرى غالباً ما يتجاهلها المطورون.
مثال على ضعف معالجة التركيز على الإدخال: افتح نافذة بعد النقر فوق رابط ، ولكن لا يركز المؤشر في أي عنصر في النافذة. والأسوأ من ذلك: التركيز على عنصر في النافذة المشروطة ، لكن التركيز لا يعود بعد الإغلاق. من الناحية المثالية ، يتم حفظ المرجع عند تشغيل الرابط ، ويركز المؤشر على نافذة جديدة ويحرك المؤشر مرة أخرى عند إغلاق النافذة.
ولكن ماذا لو كنت لا تعرف العنصر الذي يعمل عليه مؤشر الإدخال الآن؟
جافا سكريبت
من السهل استخدام المستند. ActiveElement للعثور على العنصر المحدد حاليًا:
نسخة الكود كما يلي:
var focusedElement = document.activeElement ؛
/* على سبيل المثال ، مثال:
var triggerElement = document.activeElement ؛
mymodal = mymodal جديد ({
OnoPen: Function () {
this.container.focus () ؛
} ،
onclose: function () {
triggerelement.focus () ؛
}
}) ؛
*/
هذه الخاصية لا تتوفر فقط على عناصر الإدخال العادية ، ولكنها تتضمن أيضًا حقول النماذج أو روابط العلامات ، ولكن يتوفر أي عنصر مع مجموعة سمات Tabindex.
السبب في أنني أحب المستند. ActiveElement هو أنك لست بحاجة إلى استخدام الاستماع إلى الحدث أو تفويض المستمعين لتعقب العنصر والتركيز - يمكنك الحصول على هذه الخاصية في أي وقت. بالطبع ، قبل استخدام هذه الميزات ، يجب عليك إجراء الكثير من الاختبارات - سواء كانت هناك أي أخطاء في ظروف المتصفح أو السباق. الكل في الكل ، أنا راضٍ جدًا عن ذلك وأجدها موثوقة للغاية!