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.