Autocapitalize برای موبایل

این ممکن است بی‌نظیرترین ویژگی موجود به نظر برسد، اما فکر می‌کنم مهم است زیرا همه از تایپ کردن در تلفن همراه خوششان نمی‌آید: تو از آن متنفری، من از آن متنفرم. در Chrome for Android (قبل از Chrome 43 - نسخه بتا از آوریل 2015) یک برنامه‌نویس کنترل کمی بر نحوه کمک مرورگر به کاربر در وارد کردن متن دارد. اگر امروز در دستگاهی تایپ می کنید، ممکن است به نظر برسد:

توجه داشته باشید که همه چیز با حروف کوچک است به غیر از مقادیری که اندروید تشخیص داده است که یک نام است.

اپل یک ویژگی را در 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">

autocapitalize چه ارزش هایی می تواند داشته باشد؟

جدول زیر حالت های مختلفی را نشان می دهد که یک عنصر ورودی می تواند در آن باشد:

حالت کلید واژه ها
<input>
<input autocapitalize=off>
بدون حروف بزرگ هیچکدام [پیش‌فرض]
خاموش
<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 برای حل همان نوع مشکل، از جمله موارد دیگر است. با این حال، فاقد پیاده‌سازی مرورگر بوده است - تا جایی که ما می‌دانیم، فقط سیستم عامل فایرفاکس یک پیاده‌سازی دارد و پیشوند آن (x-inputmode) است - اما همچنین استفاده بسیار کمی در وب دارد. از سوی دیگر، autocapitalize در میلیون ها صفحه در صدها هزار وب سایت در حال حاضر استفاده می شود.

چه زمانی باید از این استفاده کنم؟

این لیست کاملی از زمان استفاده از autocapitalize نیست. با این حال مکان‌هایی وجود دارد که کمک به کاربر برای وارد کردن متن ارزش زیادی دارد:

  • اگر هستید از autocapitalization=words استفاده کنید
    • انتظار نام افراد (توجه: همه نام ها از این قانون پیروی نمی کنند، اما اکثر نام های غربی به طور خودکار همانطور که انتظار می رود با حروف بزرگ نوشته می شوند)
    • نام شرکت ها
    • آدرس ها
  • اگر انتظار دارید autocapitalization=characters استفاده کنید:
    • ایالت های آمریکا
    • کدهای پستی انگلستان
  • اگر انتظار محتوایی را دارید که به شکل پاراگراف معمولی وارد شود - برای مثال، یک پست وبلاگ - از sentences برای عناصر ورودی استفاده کنید.
  • اگر منتظر محتوایی هستید که تحت تأثیر قرار نگیرد - برای مثال، وارد کردن کد، none در TextAreas استفاده نکنید.
  • اگر نمی‌خواهید اشاره‌ای داشته باشید، خودکار بزرگ‌نویسی را اضافه نکنید.