Halo, Habr! Saya mempersembahkan kepada Anda terjemahan artikel
"Segala Sesuatu yang Pernah Kamu Ingin Ketahui tentang inputmode" oleh Christian Oliff.
Catatan Penerjemah: Judul asli artikel "Segala sesuatu yang Anda ingin tahu tentang inputmode" telah diubah menjadi "Fitur dari atribut inputmode untuk OS seluler dan browser", karena yang kedua lebih akurat menyampaikan esensi.
Atribut inputmode global memberi tahu browser untuk perangkat dengan keyboard di layar opsi mana yang akan ditampilkan ketika pengguna memilih elemen input atau textarea.
<input type="text" inputmode="" /> <textarea inputmode="" />
Tidak seperti mengubah jenis formulir, inputmode tidak mengubah cara browser menginterpretasikan input - itu memberikan instruksi browser yang menampilkan keyboard.
Atribut inputmode memiliki sejarah panjang, tetapi baru-baru ini diadopsi oleh browser seluler terkemuka: Safari untuk iOS dan Chrome untuk Android. Sebelumnya, ini diterapkan di Firefox untuk Android pada 2012, tetapi kemudian, setelah beberapa bulan, itu dihapus (meskipun masih tersedia melalui bendera). Setelah hampir enam tahun, Chrome untuk Android membangun properti ini, dan dengan rilis terbaru iOS 12.2, Safari juga mendukungnya.
Dukungan atribut browser dapat dilihat di
sini . Angka-angka menunjukkan versi browser.
Sebelum kita masuk ke garis bawah, kita harus ingat bahwa standar hidup WHATWG menyediakan dokumentasi inputmode, sedangkan spesifikasi W3C 5.2 tidak lagi memuatnya. Karena WHATWG mendokumentasikan atribut tersebut, dan browser sedang mengerjakan dukungannya, kami akan mempertimbangkan karakteristik teknis dari WHATWG sebagai standar.
Inputmode mengambil beberapa nilai. Mari kita lihat satu per satu.
# Tidak ada
<input type="text" inputmode="none" />
Mari kita mulai dengan itu, karena mungkin kita tidak membutuhkan keyboard apa pun. Menggunakan inputmode = ”tidak ada” tidak akan menampilkan keyboard di Chrome untuk Android. iOS 12.2 akan menampilkan keyboard alfanumerik secara default, sehingga karakteristik yang tidak ada dalam kasus ini bisa untuk iOS seperti reset.
#Numerik
<input type="text" inputmode="numeric" />
Ini mungkin salah satu nilai inputmode yang paling umum, karena ideal untuk bidang input yang hanya memerlukan angka - misalnya, kode pin, kode pos, nomor kartu kredit, dll. Menggunakan numerik dengan tipe = ”teks” lebih masuk akal daripada mengalihkan input ke tipe = ”angka” karena inputmode = ”numerik” dapat digunakan dengan atribut maxlength, minlength, dan pattern, menjadikannya lebih fleksibel untuk berbagai kesempatan.
Saya sering melihat situs menggunakan type = "tel" dalam bahasa asing untuk menampilkan keypad numerik. Ini dianggap sebagai solusi, tetapi secara semantik tidak benar.
Ingat bahwa inputmode mendukung atribut pola, kita dapat menambahkan pattern = "\ d *" ke input untuk efek yang sama. Gunakan ini jika Anda yakin bahwa input hanya boleh memasukkan angka, karena Android (tidak seperti iOS) tidak memungkinkan pengguna mengakses keyboard dengan huruf, yang secara tidak sengaja dapat mengganggu memasukkan data yang valid.
#Tel
<input type="text" inputmode="tel" />
Memasukkan nomor telepon menggunakan tombol alfanumerik standar bisa sulit. Pada keypad telepon, setiap tombol dengan angka (kecuali 1 dan 0) mewakili tiga huruf (misalnya, 2 mewakili A, B dan C) yang terletak pada tombol yang sama. Papan tombol alfanumerik tidak merujuk ke huruf-huruf ini, sehingga men-decoding nomor telepon yang mengandung huruf (misalnya, 1-800-COLLECT) memerlukan sumber daya tambahan.
Menggunakan inputmode dengan beralih ke tel menampilkan keypad telepon standar, termasuk tombol untuk angka dari 0 hingga 9, tanda pound dan tanda bintang. Ditambah lagi kita akan memiliki karakter mnemonik alfabet (misalnya, ABC).
#Decimal
<input type="text" inputmode="decimal" />
Bidang inputmode dengan beralih ke desimal mengarah ke perubahan kecil untuk iOS, di mana keyboard terlihat sama seperti dalam kasus tel, tetapi tanda-tanda + * # digantikan oleh titik desimal. Android hanya akan menggunakan tombol angka.
#Email
<input type="text" inputmode="email" />
Saya yakin Anda mengisi formulir yang memerlukan pengenalan alamat email, yang memaksa keyboard untuk beralih hanya untuk mengakses simbol @. Ini tidak fatal, tetapi tentu saja tidak terlalu nyaman. Di sinilah nilai email berguna. Ia menambahkan simbol @ dan titik desimal.
Keyboard semacam itu dapat bermanfaat bagi mereka yang perlu memasukkan nama pengguna di Twitter, karena @ adalah karakter utama untuk mengidentifikasi pengguna di jejaring sosial ini. Alasan lain untuk digunakan mungkin jika Anda memiliki skrip sendiri untuk memeriksa email dan Anda tidak ingin menggunakan fungsi validasi yang ada di browser.
#URL
<input type="text" inputmode="url" />
Nilai URL memudahkan untuk menambahkan ekstensi nama domain (misalnya, .com) dengan menekan satu tombol; ada juga tombol yang biasa digunakan untuk alamat web, misalnya karakter (.) dan (/). Ekstensi yang ditunjukkan pada keyboard ditambahkan ke entri pengguna.
Keyboard seperti itu dapat berguna untuk menunjukkan kepada pengguna bahwa bidang input Anda menerima nama domain (site.com) serta alamat domain yang sepenuhnya memenuhi syarat (https://site.com).
Gunakan type = ”url” jika bidang input Anda memerlukan validasi karakter yang dimasukkan.
#Cari
<input type="text" inputmode="search" />
Nilai ini menampilkan tombol Go biru di iOS dan Enter hijau di Android, keduanya menggantikan Return. Seperti yang telah Anda tebak dengan namanya, pencarian digunakan untuk formulir pencarian, memberikan kunci untuk menghasilkan kueri.
Jika Anda ingin menampilkan Pencarian alih-alih Enter di iOS dan ikon kaca pembesar di Android alih-alih panah hijau, gunakan type = "search".
Apa lagi yang perlu Anda ketahui?
- Browser berbasis Chromium di Android, seperti Microsoft Edge, Brave, dan Opera, memiliki perilaku inputmode yang sama dengan Chrome.
- Saya tidak menyentuh keyboard di iPad karena alasan singkatnya. Mereka mirip dengan iPhone, hanya menyertakan lebih banyak tombol. Hal yang sama berlaku untuk tablet Android, dengan pengecualian keyboard pihak ketiga, yang mungkin merupakan topik terpisah yang patut disorot.
- Awalnya, spesifikasi yang diusulkan memiliki makna kana dan katakana untuk input Jepang, tetapi mereka tidak pernah diterapkan di browser apa pun dan oleh karena itu dihentikan.
- Nama latin juga awalnya merupakan salah satu nilai inputmode dan telah dihapus. Menariknya, jika Anda menggunakannya sekarang di iOS Safari, itu akan menampilkan nama pengguna di atas keyboard.