Kapitalisasi otomatis untuk seluler

Paul Kinlan

Fitur ini mungkin terlihat paling tidak mengesankan, tetapi menurut saya fitur ini penting karena semua orang tidak suka mengetik di perangkat seluler: Anda tidak suka, saya benci itu. Di Chrome untuk Android (sebelum Chrome 43 - Beta mulai April 2015), developer memiliki sedikit kontrol atas cara browser membantu pengguna memasukkan teks. Jika Anda mengetik di perangkat hari ini, mungkin terlihat seperti:

Perhatikan bahwa semuanya ditulis dalam huruf kecil terlepas dari beberapa nilai yang dikenali oleh Android sebagai nama.

Apple memperkenalkan atribut pada HTMLInputElement dan HTMLTextAreaElement yang disebut autokap di iOS 5 dan penulis halaman dapat memberikan petunjuk tentang cara browser harus menyajikan keyboard virtual bagi pengguna untuk mengoptimalkan entri teks bagi pengguna. Dalam bentuknya yang paling sederhana, Anda dapat menunjukkan bahwa kotak teks akan otomatis menggunakan huruf besar untuk huruf pertama setiap kalimat baru.

Mulai Chrome 43, Chrome akan mendukung atribut autokap pada HTMLInputElement dan HTMLTextAreaElement, yang memungkinkan Anda mengontrol perilaku otomatis kapitalisasi keyboard virtual dan menampilkannya secara inline dengan Safari di iOS.

kapitalisasi otomatis hanya akan berlaku untuk HTMLInputElement yang memiliki atribut type yang disetel ke: type="text", type="search", type="url", type="tel", type="email" atau type="password". Defaultnya adalah tidak membuat huruf besar otomatis.

Berikut adalah contoh sederhana yang memungkinkan Anda membuat huruf besar otomatis pada kalimat di area teks:

<textarea autocapitalize="sentences">

Nilai apa yang dapat diambil oleh kapitalisasi otomatis?

Tabel berikut menunjukkan berbagai status yang dapat menempatkan elemen input:

Negara Bagian Kata kunci
<input>
<input autocapitalize=off> 		Tanpa Kapitalisasi tidak ada [default]
nonaktif
<input autocapitalize=characters> Kapitalisasi Karakter karakter
<input autocapitalize=words> Kapitalisasi Kata kata
<input autocapitalize=sentences> Kapitalisasi Kalimat kalimat

Untuk HTMLInputElement, nilai default yang tidak valid adalah Kapitalisasi Kalimat jika jenis elemennya adalah type=text atau type=search. Jika tidak, nilainya adalah Tanpa Kapitalisasi.

  • <input autocapitalize="simon"> akan menjadi kolom teks dengan Kapitalisasi Kalimat
  • <input type="email" autocapitalize="simon"> akan menjadi kolom teks dengan Tanpa Kapitalisasi.
  • <input> akan menjadi kolom teks dengan Tanpa Kapitalisasi.

Untuk HTMLTextAreaElement, nilai default yang tidak valid adalah Sentences Capitalization. Ini adalah perubahan dari perilaku default.

  • <textarea autocapitalize="terry"></textarea> akan menjadi area teks dengan Kapitalisasi Kalimat
  • <textarea></textarea> akan menjadi area teks dengan Kapitalisasi Kalimat.
  • <textarea autocapitalize="none"></textarea> akan menjadi area teks dengan Tanpa Kapitalisasi.

Untuk HTMLFormElement, kami memutuskan untuk tidak menerapkan atribut tersebut, karena kami menemukan bahwa atribut tersebut saat ini jarang digunakan di halaman, dan saat digunakan, atribut tersebut sebagian besar digunakan untuk menonaktifkan kapitalisasi otomatis di formulir sepenuhnya:

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

Hal di atas terlihat ganjil, karena status default untuk HTMLInputElement adalah Tanpa Kapitalisasi.

Mengapa Anda menggunakan ini selama inputmode?

inputmode dimaksudkan untuk menyelesaikan jenis masalah yang sama, di antara hal lainnya. Namun, implementasi browser belum ada - sejauh pengetahuan kami, hanya Firefox OS yang memiliki implementasi dan berawalan (x-inputmode) - tetapi penggunaannya juga sangat sedikit di web. Di sisi lain, autocapitalize sudah digunakan di jutaan halaman di ratusan ribu situs.

Kapan saya harus menggunakan ini?

Daftar ini bukanlah daftar lengkap tentang kapan Anda harus menggunakan autocapitalize; tetapi, ada sejumlah tempat di mana membantu pengguna memasukkan teks akan sangat bermanfaat:

  • Gunakan autocapitalization=words jika Anda
    • Mengharapkan nama orang (catatan: tidak semua nama mengikuti aturan ini, tetapi sebagian besar nama dalam bahasa barat akan menggunakan huruf besar secara otomatis seperti yang diharapkan)
    • Nama perusahaan
    • Alamat
  • Gunakan autocapitalization=characters jika Anda mengharapkan:
    • Negara bagian Amerika Serikat
    • Kode pos Inggris Raya
  • Gunakan sentences untuk elemen input jika Anda mengharapkan konten yang dimasukkan dalam bentuk paragraf normal - misalnya, postingan blog.
  • Gunakan none di TextAreas jika Anda mengharapkan konten yang seharusnya tidak terpengaruh - misalnya, memasukkan kode.
  • Jika Anda tidak ingin memberikan petunjuk, jangan tambahkan kapitalisasi otomatis.