استخدام الأحرف الكبيرة تلقائيًا في الأجهزة الجوّالة

بول كينلان

قد يبدو ذلك أقل ميزة للإعجاب على الإطلاق، لكنني أعتقد أنها مهمة لأن الجميع لا يحبون الكتابة على الأجهزة الجوّالة: تكرهها، وأكرهها. في متصفح Chrome لنظام التشغيل Android (الإصدار التجريبي من Chrome 43 - الإصدار التجريبي اعتبارًا من نيسان (أبريل) 2015)، لا يمتلك المطوِّر سوى القليل من التحكّم في كيفية مساعدة المتصفح للمستخدم على إدخال النص. إذا كنت تكتب على أحد الأجهزة اليوم، قد يبدو كما يلي:

لاحظ أن كل شيء يظهر بأحرف صغيرة باستثناء بعض القيم التي تعرف عليها Android باعتبارها اسمًا.

قدّمت Apple سمة على HTMLInputElement وHTMLTextAreaElement تُسمّى autocapitalize في نظام التشغيل iOS 5 وهي تسمح لمؤلف الصفحة بتلميح إلى الطريقة التي يجب أن يقدّم بها المتصفّح لوحة المفاتيح الافتراضية للمستخدم من أجل تحسين إدخال النص للمستخدم. في أبسط أشكاله، يمكنك الإشارة إلى أن مربع النص يجب أن يُكتب بحرف كبير تلقائيًا من كل جملة جديدة.

بدءًا من Chrome 43، سيدعم Chrome السمة autocapitalize على كل من HTMLInputElement وHTMLTextAreaElement، والتي ستتيح لك التحكم في سلوك الكتابة بالأحرف الكبيرة تلقائيًا للوحة المفاتيح الافتراضية وتضمينها في متصفّح Safari على نظام التشغيل iOS.

لن يتم تطبيق autocapitalize إلا على HTMLInputElement التي تم ضبط السمة type فيها على: type="text" أو type="search" أو type="url" أو type="tel" أو type="email" أو type="password". الإعداد التلقائي هو عدم استخدام الأحرف الكبيرة تلقائيًا.

في ما يلي مثال بسيط يتيح لك استخدام الأحرف الكبيرة تلقائيًا في الجمل في مربّع النص:

<textarea autocapitalize="sentences">

ما القيم التي يمكن أن تتخذها الأحرف الكبيرة تلقائيًا؟

يوضح الجدول التالي الحالات المختلفة التي يمكن أن يكون فيها عنصر الإدخال:

الحالة الكلمات الرئيسية
<input>
<input autocapitalize=off> 		بدون استخدام الأحرف الكبيرة none [تلقائية]
إيقاف
<input autocapitalize=characters> تكبير الحروف الأحرف
<input autocapitalize=words> تكبير الكلمات الكلمات
<input autocapitalize=sentences> تكبير الجمل جمل

بالنسبة إلى HTMLInputElement، تكون القيمة التلقائية غير الصالحة هي أحرف كبيرة للجُمل إذا كان نوع العنصر type=text أو type=search. وبخلاف ذلك، تكون القيمة بدون كتابة بالأحرف الكبيرة.

  • سيكون <input autocapitalize="simon"> حقلاً نصيًا مع تكبير الحروف
  • يجب أن يكون الحقل "<input type="email" autocapitalize="simon">" حقلاً نصيًا مع عدم الكتابة بالأحرف اللاتينية الكبيرة.
  • يجب أن يكون الحقل "<input>" حقلاً نصيًا مع عدم الكتابة بالأحرف اللاتينية الكبيرة.

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

  • <textarea autocapitalize="terry"></textarea> عبارة عن منطقة نص مكتوبة بأحرف كبيرة في الجمل
  • <textarea></textarea> ستكون منطقة نص بها أحرف كبيرة للجملة.
  • يجب أن تكون <textarea autocapitalize="none"></textarea> منطقة نص بدون استخدام أحرف كبيرة.

بالنسبة إلى HTMLFormElement، قرّرنا عدم استخدام السمة، لأننا اكتشفنا أنّها نادرًا ما تُستخدم على الصفحات في الوقت الحالي، وعندما يتم استخدامها، يتم استخدامها في الغالب لإيقاف الكتابة بالأحرف اللاتينية الكبيرة تلقائيًا في النموذج:

<form autocapitalize=off><input></form>

ما ورد أعلاه فردي، حيث إن الحالة التلقائية لـ HTMLInputElement هي بدون استخدام أحرف كبيرة.

لماذا تستخدم هذه الخدمة أكثر من inputmode؟

تهدف inputmode إلى حل نفس النوع من المشكلات، من بين أمور أخرى. ومع ذلك، كان يفتقر إلى استخدامات المتصفّح الخاصة بالمتصفّح. وحسبما علمنا، لا يتوفّر سوى نظام تشغيل Firefox فقط، وهو بادئ (x-inputmode) ولكن استخداماته قليلة جدًا على الويب. من ناحية أخرى، يُستخدم autocapitalize في الملايين من الصفحات على مئات الآلاف من المواقع الإلكترونية.

متى أستخدم هذا الحساب؟

هذه ليست قائمة شاملة للحالات التي يجب فيها استخدام السمة autocapitalize، ومع ذلك هناك عدد من المواضع التي يمكن فيها مساعدة المستخدم على إدخال النص في توفير قيمة كبيرة:

  • استخدِم السمة autocapitalization=words إذا كنت:
    • توقع أسماء الأشخاص (ملاحظة: لا تتبع كل الأسماء هذه القاعدة، ولكن معظم الأسماء الغربية ستكتب الأحرف تلقائيًا كما هو متوقع)
    • أسماء الشركات
    • العناوين
  • يمكنك استخدام autocapitalization=characters إذا كنت تتوقع:
    • الولايات الأمريكية
    • الرموز البريدية في المملكة المتحدة
  • يمكنك استخدام sentences لعناصر الإدخال إذا كنت تتوقع إدخال محتوى في شكل فقرة عادي، مثل مشاركة مدونة.
  • يُرجى استخدام none في TextAreas إذا كنت تتوقع محتوى يجب ألا يتأثر، مثل إدخال الرمز.
  • إذا كنت لا تريد التلميح، لا تضِف الأحرف الكبيرة تلقائيًا.