تركيز عنصر في Blazor

بعد العمل على لعبة Wordlzor التي قمت بها مؤخرًا، كنت بحاجة إلى إضافة وظيفة بسيطة جدًا: التركيز على اللعبة بأكملها عند الدخول.

يجب القيام بذلك لأنه يمكن للمستخدم الكتابة فعليًا في اللعبة وليس فقط استخدام لوحة المفاتيح التي تظهر على الشاشة.

ملف جافا سكريبت

من أجل القيام بذلك، علينا إنشاء ملف جافا سكريبت يسمى app.js الذي سيحتوي على وظيفة

window.FocusElement = (element) => {
    element.focus();
};

بعد أن قمنا بذلك، نحتاج إلى تضمين البرنامج النصي في ملف index.html:

<script src="js/app.js"></script>

مكون البلازور

بمجرد تهيئة البرنامج النصي، نحتاج إلى العثور على عنصر للتركيز عليه، لذلك في أي من مكوناتنا، نحتاج إلى إحالة هذا العنصر إلى كائن.

لذلك، في مكون blazor الخاص بنا، دعنا نضيف div مع خاصية @ref:

<div @ref=@elementToFocus tabindex="0" >
    This is my focus component
</div>

بعد ذلك، في منطق المكون، يمكنك الحصول على الخاصية كـ ElementReference:

/// <summary>
/// Reference to element
/// </summary>
private ElementReference elementToFocus;

حقن JSInterop

الآن، من أجل استدعاء الوظيفة الموجودة في ملف Javascript لدينا، نحتاج إلى استخدام JSInterop.

بادئ ذي بدء، يجب علينا حقنه في المكون بالصيغة التالية:

[Inject]
public IJSRuntime JSRuntime { get; set; }

بعد إدخال الخدمة، أصبحنا الآن قادرين على استدعاء أي من التوابع الموجودة بها، مثل InvokeVoidAsync، والتي ستستدعي الدالة:

public async Task Focus()
{
    // Focus when initializing
    await JSRuntime.InvokeVoidAsync("window.FocusElement", elementToFocus);
}

وعندما تستدعي funciton Focus()، فإنه سيركز على العناصر التي أنشأناها، ومن الواضح أنه يمكنك إعادة بناء العنصر نفسه وتمريره كمعلمة.

إذا كنت تريد إلقاء نظرة على كيفية تنفيذ ذلك، فقم بإلقاء نظرة على كود المصدر Wordlzor، الذي استخدمته للتنبيهات والتركيز عند إغلاق نموذج التعليمات.