الدرس 8 من 8

عدّاد الأحرف

هدف الدرس

إظهار الحدّ قبل أن يصل إليه المستخدم

01

الشرح

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

الخاصية maxlength تجعل المتصفح نفسه يفرض الحدّ حتى عند اللصق، فلا تحتاج إلى كود يقصّ النصّ الزائد. أمّا العدّاد فتحسبه مع كل حدث input بهذه العملية: maxLength - value.length.

ولمن لا يرى العدّاد أضف aria-live="polite"، فهي تجعل قارئ الشاشة ينطق التغيير بعد أن ينتهي من كلامه، وليس في منتصفه كما تفعل assertive. ويجب أن تكون هذه المنطقة الحيّة (live region) موجودة في الصفحة من البداية، لأنها إن أُضيفت مع نصّها في اللحظة نفسها فالغالب أنها لن تُنطق.

02

المطلوب

اجعل الحدّ الأقصى لـ #bio هو 140 حرفًا، واكتب عدد الأحرف المتبقّية في #count عند التحميل ومع كل كتابة، واجعل العدّاد منطقة حيّة من نوع polite، ثم اربط الحقل به بـ aria-describedby.

الفحوص

5 فحوص
  1. المتصفح يفرض حدًّا قدره 140 حرفًا
  2. العدّاد يظهر قبل الكتابة
  3. الكتابة تُنقص العدّاد
  4. العدّاد منطقة حيّة من نوع polite
  5. الحقل مربوط بالعدّاد
03

تلميحات

0/3
دروس المسارأتممت 0 من 8

تتعلّم في هذا المسار أن تضع قواعد تحقّق خاصّة بك، وأن تربط حقلًا بآخر، وأن تكتب رسائل خطأ يسمعها قارئ الشاشة.

مستواه متوسّط، وفيه 8 دروس مجموع مدّتها ساعة ونصف.

index.html
المعاينة
index.html100%
–/5

اضغط «تشغيل وتصحيح» ليبدأ الفحص.

تجد 5 فحوص في بطاقة «المطلوب».

دروس المسارأتممت 0 من 8

تتعلّم في هذا المسار أن تضع قواعد تحقّق خاصّة بك، وأن تربط حقلًا بآخر، وأن تكتب رسائل خطأ يسمعها قارئ الشاشة.

مستواه متوسّط، وفيه 8 دروس مجموع مدّتها ساعة ونصف.