أحداث إعادة ضبط النموذج وإدارة الحالة
معالجة إعادة ضبط النموذج وتتبع حالة الحقول عبر تفاعلات المستخدم
أحداث إعادة ضبط النموذج وإدارة الحالة درس مجاني في HTML Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML Academy 4 دروس في المجموع.
حدث reset
يؤدي استدعاء form.reset() أو النقر على <button type="reset"> إلى إطلاق حدث reset على النموذج. يعود كل حقل إلى قيمته الأولية، أي سمة value أو القيمة الفارغة لحقول الإدخال الجديدة. استمعوا إلى الحدث للتفاعل مع عملية إعادة الضبط برمجيًا.
القيم الافتراضية
الحالة الأولية التي تستخدمها عملية reset هي الخاصية defaultValue أو defaultChecked أو defaultSelected، وليست القيمة الحالية. وتعكس هذه الخصائص سمات value أو checked أو selected في HTML، التي تُحدَّد وقت التحليل ولا تتغير نتيجة تفاعل المستخدم.
تحديث القيم الافتراضية برمجيًا
لجعل القيمة الحالية هي «القيمة الافتراضية» الجديدة، بحيث تعود عمليات reset اللاحقة إليها، عيّنوا input.defaultValue = input.value. يفيد ذلك بعد الحفظ بنجاح، إذ تعود عمليات reset المستقبلية إلى الحالة المحفوظة بدلًا من النموذج الفارغ الأصلي.
form.addEventListener("submit", () => {
// After save, treat current as defaults
Array.from(form.elements).forEach((el) => {
if ("defaultValue" in el) el.defaultValue = el.value;
});
});الاستماع إلى reset
يُطلَق حدث reset قبل عودة القيم. لفحص الحالة بعد reset، أجّلوا التنفيذ إلى المهمة الدقيقة التالية: form.addEventListener("reset", () => queueMicrotask(() => { ... use new values ... })). هذه من التفاصيل الشائعة المربكة في توقيت الأحداث.
منع reset
إذا استدعيتم e.preventDefault() في معالج حدث reset، تُلغى عملية reset وتبقى القيم كما كانت. يفيد ذلك لعرض تأكيد «هل أنتم متأكدون؟» في النماذج التي تحتوي على إدخالات مهمة من المستخدم.
تتبع حالة التعديلات غير المحفوظة
قارنوا القيم الحالية بالقيم الافتراضية لمعرفة ما إذا كان النموذج يحتوي على تعديلات غير محفوظة: const dirty = Array.from(form.elements).some(el => el.value !== el.defaultValue). استخدموا ذلك لتفعيل زر الحفظ أو تعطيله، أو لعرض تأكيد بشأن التغييرات غير المحفوظة.
تأكيد beforeunload
لتحذير المستخدم قبل مغادرة نموذج يحتوي على تعديلات غير محفوظة: window.addEventListener("beforeunload", (e) => { if (isDirty(form)) { e.preventDefault(); } }). تعرض المتصفحات مطالبة عامة مثل «مغادرة الموقع؟»؛ ولم تعد الرسائل المخصصة مدعومة في المتصفحات الحديثة.
أزرار reset غالبًا ما تقدم تجربة مستخدم سيئة
تعيد أزرار reset ضبط كل حقل بنقرة واحدة غير مقصودة، وغالبًا ما تكون النتائج كارثية. لذلك تحذفها معظم الواجهات الحديثة بالكامل أو تخفيها خلف تأكيد. إذا احتجتم إلى reset، فضعوه بعيدًا عن زر الإرسال وفكروا في توفير تراجع بخطوة واحدة.
حفظ حالة النموذج
في النماذج الطويلة، احفظوا الحالة في localStorage عند وقوع أحداث الإدخال واستعيدوها عند التحميل. أرفقوا ذلك بمطالبة «استعادة المسودة؟» حتى لا يفقد المستخدم عمله عند إغلاق علامة تبويب بالخطأ. ادمجوا ذلك مع معالجات reset وsubmit لمسح الحالة المحفوظة عند عدم الحاجة إليها.
form.addEventListener("input", () => {
localStorage.setItem("form-draft", JSON.stringify(new FormData(form)));
});المكونات المخصصة وreset
تشارك عناصر النماذج المخصصة، المبنية كمكونات ويب، في عملية reset عبر ElementInternals. أعيدوا القيمة الافتراضية داخل طريقة formResetCallback. وهذا مطلوب عندما يغلّف العنصر المخصص عنصر إدخال داخليًا يحتاج إلى reset صريح.
العناصر المخصصة المرتبطة بالنموذج
يؤدي التصريح عن static formAssociated = true في صنف عنصر مخصص، واستخدام this.attachInternals()، إلى إتاحة formResetCallback وformStateRestoreCallback وformDisabledCallback وformAssociatedCallback لدمج العنصر في دورة حياة النموذج.
اختبار المعرفة
إلى أي قيمة يعود كل حقل عند استدعاء form.reset()؟
الخلاصة
يُطلَق حدث reset عند تنفيذ form.reset()، وتعود الحقول إلى defaultValue أو defaultChecked أو defaultSelected. حدّثوا القيم الافتراضية بعد الحفظ لجعلها حالة reset الجديدة. تتبعوا التعديلات غير المحفوظة بمقارنة القيم الحالية بالقيم الافتراضية، واحفظوا الحالة في localStorage للنماذج الطويلة، واستخدموا beforeunload للتحذير عند مغادرة الصفحة. تتكامل العناصر المخصصة عبر formAssociated وformResetCallback.
الأسئلة الشائعة
هل درس «أحداث إعادة ضبط النموذج وإدارة الحالة» مجاني؟
نعم — نص درس «أحداث إعادة ضبط النموذج وإدارة الحالة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML Academy، انتقل إلى CoddyKit PRO. تتضمن دورة HTML Academy 4 دروس في المجموع.
ماذا ستتعلم في «أحداث إعادة ضبط النموذج وإدارة الحالة»؟
معالجة إعادة ضبط النموذج وتتبع حالة الحقول عبر تفاعلات المستخدم تتمرن على HTML Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML Academy؟
لا تُشترط خبرة سابقة. HTML Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «أحداث إعادة ضبط النموذج وإدارة الحالة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML Academy هذا؟
نعم. كل درس في HTML Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- FormData API
- Constraint Validation API
- reportValidity وsetCustomValidity
- أحداث إعادة ضبط النموذج وإدارة الحالة