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.