إرسال تلقائي عند كتابة الرقم الأخير في JavaScript وBlazor

تعتبر تقنية التقديم التلقائي للمدخلات عند كتابة الرقم الأخير في نماذج الويب من الميزات المهمة التي تساعد على تحسين تجربة المستخدم. اليوم، سنستعرض كيفية تنفيذ هذه الميزة باستخدام JavaScript وC#/Blazor بطريقة فعالة ومرتبة.

فهم الآلية الأساسية للتقديم التلقائي

عند العمل على نماذج الويب، قد يحتاج المطورون إلى تقديم المدخلات بمجرد أن يكمل المستخدم كتابة جميع الأرقام المطلوبة. قد تكون هذه الأرقام لأغراض مختلفة مثل إدخال رقم بطاقة الائتمان أو كود الأمان. من خلال استخدام JavaScript، يمكننا جعل هذا الأمر تلقائيًا، مما يوفر الوقت والجهد للمستخدمين.

تطبيق الميزة باستخدام JavaScript

للقيام بذلك، نحتاج إلى تعديل الكود الخاص بمدخلات النموذج. في البداية، من المهم أن نضيف فئة معينة للمدخلات، مثلاً فئة "validationInput". ستساعد هذه الفئة في إظهار المدخلات الصحيحة للمستخدم وتقديم مظهر منظم للنموذج.

عند إضافة الأحداث المناسبة على المدخلات، يمكننا استخدام input.addEventListener('keyup', function(e) {...}). هنا نقوم بتشغيل الشيفرة عندما يقوم المستخدم بإدخال بيانات جديدة. فكرتنا هي التحقق من عدد الأحرف المدخلة. على سبيل المثال، إذا كان هناك عدد معين من الأحرف المسموح بها، يمكننا مباشرة تقديم النموذج.

تعديل الشيفرة الخاصة بك

يمكنك إجراء بعض التعديلات على الشيفرة لديك لجعلها أكثر كفاءة. أحد هذه التعديلات هو تغيير عبارة "if" إلى "else if" لضمان أولوية التنفيذ، مما يعني أن الشيفرة ستفحص الشروط في ترتيب معين. يمكننا كذلك إضافة عبارة "else" للتحقق مما إذا كان مجموع طول جميع المدخلات هو 6 أو أكثر.

إليك مثال على كيفية هيكلة الكود وفقًا لهذه التعليمات:

const inputs = document.querySelectorAll('.validationInput');
inputs.forEach(input => {
    input.addEventListener('keyup', function(e) {
        let totalLength = [...inputs].reduce((acc, curr) => acc + curr.value.length, 0);
        if (input.value.length === 1) {
            // تنفيذ إجراء بعد إدخال الرقم الأخير
        } else if (totalLength >= 6) {
            // تقديم النموذج
            document.forms[0].submit();
        }
    });
});

في هذا المثال، نقوم بتحديد جميع المدخلات التي تحمل فئة "validationInput". بعد ذلك، نستخدم حلقة forEach لتطبيق مستمع الحدث عليهم. عند كتابة مستخدم، نقوم بحساب الطول الكلي لكل المدخلات. إذا كان الطول الكلي 6 أو أكثر، نقوم بتقديم النموذج تلقائيًا.

الاستفادة من C#/Blazor

إذا كنت تستخدم C#/Blazor، يمكنك دمج هذه الوظيفة بسهولة في التطبيق الخاص بك. Blazor يسمح لك بكتابة تطبيقات صفحات واحدة باستخدام لغة C#، وبالتالي يمكنك استغلال JavaScript بشكل فعال من خلال واجهات برمجة التطبيقات المتاحة.

عند إنشاء مكون Blazor، يمكنك تضمين الشيفرة JavaScript المذكورة أعلاه داخل وظيفة OnAfterRenderAsync لضمان تنفيذ الكود عند عرض المكون. هذا السيناريو يتيح لك دمج قوة كل من C#/Blazor وJavaScript.

الختام

تقدم تقنية التقديم التلقائي عند كتابة الرقم الأخير في نماذج الويب تجربة مستخدم محسنة وسلسة. من خلال استخدام JavaScript، يمكنك تبسيط عملية الإدخال وجعلها أكثر فعالية. كما أن دمج هذه التقنية مع C#/Blazor يمكن أن يوفر الكثير من المزايا، مما يمنحك تطبيقات أكثر ذكاءً وسهولة في الاستخدام.

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