مرحبا يا هبر! أقدم لكم ترجمة المقال
"كل ما تريد معرفته عن مدخلات" كريستيان أوليف.
ملاحظة المترجم: تم تغيير العنوان الأصلي لمقال "كل شيء تريد أن تعرفه عن طريقة إدخال" إلى "ميزات سمة إدخال الإدخال لنظام التشغيل والمتصفحات المتنقلة" ، حيث أن العنوان الثاني ينقل جوهر المشكلة بدقة أكبر.
تخبر سمة إدخال الإدخال العالمية المتصفحات للأجهزة التي تحتوي على لوحة مفاتيح على الشاشة والتي يجب إظهارها عند اختيار المستخدم لعنصر إدخال أو textarea.
<input type="text" inputmode="" /> <textarea inputmode="" />
بخلاف تغيير نوع النموذج ، لا يغير إدخال الإدخال الطريقة التي يفسر بها المستعرض المدخلات - إنه يعطي إرشادات المستعرض عن لوحة المفاتيح التي سيتم عرضها.
تتميز سمة inputmode بتاريخ طويل ، ولكن تم اعتمادها مؤخرًا من قِبل متصفحات الجوّال الرائدة: Safari لنظامي التشغيل iOS و Chrome لنظام Android. في السابق ، تم تطبيقه في Firefox لنظام Android في عام 2012 ، ولكن في وقت لاحق ، بعد بضعة أشهر ، تم حذفه (على الرغم من أنه لا يزال متاحًا من خلال العلم). بعد ما يقرب من ست سنوات ، بنى Chrome لنظام Android هذه الخاصية ، ومع الإصدار الأخير من iOS 12.2 ، يدعمها Safari أيضًا.
يمكن الاطلاع على دعم سمة المتصفح
هنا . تشير الأرقام إلى إصدار المتصفح.
قبل أن نصل إلى الحد الأدنى ، يجب أن نضع في اعتبارنا أن مستوى المعيشة WHATWG يوفر وثائق إدخال الإدخال ، بينما لم تعد المواصفات W3C 5.2 تحتوي عليه. نظرًا لأن WHATWG توثق السمة ، وتعمل المتصفحات على دعمها ، فسننظر في الخصائص التقنية لـ WHATWG كمعيار.
يأخذ Inputmode عدة قيم. دعونا ننظر إليهم واحدًا تلو الآخر.
#None
<input type="text" inputmode="none" />
لنبدأ به ، لأنه ربما لا نحتاج إلى أي لوحة مفاتيح. لن يؤدي استخدام inputmode = "none" إلى إظهار لوحة المفاتيح في Chrome لنظام Android. سيعرض iOS 12.2 لوحة المفاتيح الأبجدية الرقمية الخاصة به افتراضيًا ، لذلك لا يمكن أن تكون أي من الخصائص المميزة في هذه الحالة لنظام iOS يشبه إعادة التعيين.
#Numeric
<input type="text" inputmode="numeric" />
ربما تكون هذه واحدة من أكثر قيم رموز الإدخال شيوعًا ، حيث إنها مثالية لحقول الإدخال التي تتطلب أرقامًا فقط - على سبيل المثال ، الرموز البريدية والرموز البريدية وأرقام بطاقات الائتمان ، إلخ. يمكن أن يكون استخدام الرقم الرقمي مع type = "text" أكثر منطقية من تبديل الإدخال إلى type = "number" لأنه يمكن استخدام inputmode = "numeric" مع سمات الطول الأقصى والطول والنمط ، مما يجعله أكثر تنوعًا لمناسبات مختلفة.
رأيت غالبًا المواقع التي تستخدم type = "tel" بلغة أجنبية لعرض لوحة مفاتيح رقمية. يعتبر هذا حلاً ولكن غير صحيح بشكل صحيح.
تذكر أن إدخال رمز يدعم سمة النقش ، يمكننا إضافة نقش = "\ d *" لإدخال نفس التأثير. استخدم هذا إذا كنت متأكدًا من أن الإدخال يجب أن يسمح بإدخال الأرقام فقط ، لأن Android (على عكس iOS) لا يسمح للمستخدم بالوصول إلى لوحة المفاتيح بأحرف ، والتي قد تتداخل بطريق الخطأ مع إدخال بيانات صالحة.
#Tel
<input type="text" inputmode="tel" />
قد يكون إدخال رقم هاتف باستخدام لوحة المفاتيح الرقمية الأبجدية أمرًا صعبًا. على لوحة مفاتيح الهاتف ، يمثل كل زر برقم (باستثناء 1 و 0) ثلاثة أحرف (على سبيل المثال ، يمثل 2 A و B و C) الموجودة على نفس المفتاح. لا تشير لوحة المفاتيح الأبجدية الرقمية إلى هذه الأحرف ، لذا فإن فك شفرة رقم هاتف يحتوي على أحرف (على سبيل المثال ، 1-800-COLLECT) يتطلب موارد إضافية.
استخدام طريقة إدخال الإدخال مع التبديل إلى الهاتف يعرض لوحة مفاتيح قياسية للهاتف ، بما في ذلك أزرار الأرقام من 0 إلى 9 وعلامات الجنيه والنجمة. بالإضافة إلى أنه سيكون لدينا أحرف ذاكري الأبجدية (على سبيل المثال ، ABC).
#Decimal
<input type="text" inputmode="decimal" />
يؤدي حقل إدخال الإدخال مع التبديل إلى رقم عشري إلى تغييرات صغيرة لنظام التشغيل iOS ، حيث تبدو لوحة المفاتيح كما هي في حالة الهاتف ، ولكن يتم استبدال العلامات + * # بفاصلة عشرية. سوف يستخدم Android لوحة المفاتيح الرقمية فقط.
#Email
<input type="text" inputmode="email" />
أنا متأكد من أنك قد قمت بملء نموذج تطلب إدخال عنوان بريد إلكتروني ، والذي أجبر لوحة المفاتيح على التبديل فقط للوصول إلى الرمز @. هذه ليست قاتلة ، ولكن بالتأكيد ليست مريحة للغاية. هذا هو المكان الذي تأتي فيه قيمة البريد الإلكتروني في متناول يدي. يضيف الرمز @ والنقطة العشرية.
يمكن أن تكون لوحة المفاتيح هذه مفيدة لأولئك الذين يحتاجون إلى إدخال اسم مستخدم على Twitter ، لأن @ هي الشخصية الرئيسية لتحديد المستخدمين في هذه الشبكة الاجتماعية. قد يكون هناك سبب آخر للاستخدام إذا كان لديك البرنامج النصي الخاص بك للتحقق من البريد الإلكتروني وكنت لا ترغب في استخدام وظيفة التحقق من الصحة المضمنة في المتصفح.
#URL
<input type="text" inputmode="url" />
تجعل قيمة عنوان URL من السهل إضافة ملحق اسم مجال (على سبيل المثال ، .com) عن طريق الضغط على زر واحد ؛ هناك أيضًا أزرار شائعة الاستخدام لعناوين الويب ، على سبيل المثال ، الأحرف (.) و (/). تتم إضافة الامتداد الظاهر على لوحة المفاتيح لإدخال المستخدم.
يمكن أن تكون لوحة المفاتيح هذه مفيدة لإظهار المستخدمين أن حقل الإدخال الخاص بك يقبل أسماء النطاقات (site.com) وكذلك عناوين المجال المؤهلة بالكامل (https://site.com).
استخدم type = "url" إذا كان حقل الإدخال الخاص بك يتطلب التحقق من صحة الأحرف التي تم إدخالها.
# البحث تورنت
<input type="text" inputmode="search" />
تعرض هذه القيمة الزر "الانتقال" الأزرق على نظام التشغيل iOS والأخضر Enter على نظام Android ، كلاهما بدلاً من Return. كما كنت قد خمنت بالاسم ، يتم استخدام البحث عن نماذج البحث ، ويوفر مفتاحًا لإنتاج استعلام.
إذا كنت ترغب في إظهار "البحث" بدلاً من "إدخال" في iOS وأيقونة العدسة المكبرة على نظام Android بدلاً من السهم الأخضر ، فاستخدم type = "search".
# ماذا تحتاج إلى معرفته
- تتمتع المستعرضات التي تستند إلى Chromium على Android ، مثل Microsoft Edge و Brave و Opera ، بنفس سلوك إدخال الإدخال مثل Chrome.
- لم أتطرق إلى لوحات المفاتيح على iPad لأسباب تتعلق بالاختصار. أنها تشبه iPhone ، وتشمل فقط المزيد من الأزرار. وينطبق الشيء نفسه على الأجهزة اللوحية التي تعمل بنظام Android ، باستثناء لوحات مفاتيح الجهات الخارجية ، والتي قد تكون موضوعًا منفصلًا يستحق الإبراز.
- في البداية ، كان للمواصفات المقترحة معاني kana و katakana للإدخال الياباني ، لكن لم يتم تطبيقها في أي مستعرض وبالتالي تم إيقافها.
- كان الاسم اللاتيني أيضًا في الأصل أحد قيم إدخال الإدخال وتمت إزالته. ومن المثير للاهتمام ، إذا كنت تستخدمه الآن في iOS Safari ، فسيعرض اسم المستخدم أعلى لوحة المفاتيح.