Kapitalisasi otomatis untuk seluler

Paul Kinlan

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

Perhatikan bahwa semuanya dalam huruf kecil, kecuali beberapa nilai yang dikenali Android sebagai nama.

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

Mulai Chrome 43, Chrome akan mendukung atribut autocapitalize di HTMLInputElement dan HTMLTextAreaElement, yang akan memungkinkan Anda mengontrol perilaku kapitalisasi otomatis keyboard virtual dan menyelaraskannya dengan Safari di iOS.

autocapitalize hanya akan berlaku untuk HTMLInputElement yang memiliki atribut type yang ditetapkan ke: type="text", type="search", type="url", type="tel", type="email", atau type="password". Setelan default-nya adalah tidak mengkapitalisasi otomatis.

Berikut adalah contoh sederhana yang memungkinkan Anda mengkapitalisasi otomatis kalimat di area teks:

<textarea autocapitalize="sentences">

Nilai apa yang dapat diambil oleh kapitalisasi otomatis?

Tabel berikut menunjukkan berbagai status yang dapat dimiliki elemen input:

Negara Bagian Kata kunci
<input>
<input autocapitalize=off> 		Tanpa Kapitalisasi none [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 Tidak Ada Kapitalisasi.

  • <input autocapitalize="simon"> akan menjadi kolom teks dengan Kapitalisasi Kalimat
  • <input type="email" autocapitalize="simon"> akan menjadi kolom teks dengan Tidak Menggunakan Huruf Besar.
  • <input> akan menjadi kolom teks dengan Tidak Menggunakan Huruf Besar.

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 Tidak Ada Kapitalisasi.

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

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

Hal di atas aneh, karena status default untuk HTMLInputElement adalah Tidak Ada Kapitalisasi.

Mengapa Anda menggunakan ini daripada inputmode?

inputmode dimaksudkan untuk menyelesaikan jenis masalah yang sama, di antara hal lainnya. Namun, penerapan browsernya masih kurang - sejauh pengetahuan kami, hanya Firefox OS yang memiliki penerapan dan diawali dengan awalan (x-inputmode) - tetapi penggunaannya di web juga sangat sedikit. Di sisi lain, autocapitalize sudah digunakan di jutaan halaman di ratusan ribu situs.

Kapan saya harus menggunakannya?

Ini bukan daftar lengkap kapan Anda harus menggunakan autocapitalize; tetapi ada sejumlah tempat yang membantu pengguna memasukkan teks memberikan nilai yang besar:

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