Kodeloka1. Ergonomi Papan Ketik Layar Sentuh: inputmode, enterkeyhint, dan autocapitalize
Lebih dari separuh trafik web berasal dari ponsel pintar. Dengan menambahkan tiga atribut global ini pada elemen input atau editor Anda, pengalaman mengetik pengguna di Android dan iOS meningkat drastis:
A. enterkeyhint: Mengubah Label Tombol Enter di Papan Ketik Ponsel
Tahukah Anda bahwa Anda bisa mengubah tulisan dan ikon tombol Enter di pojok kanan bawah papan ketik ponsel menjadi "Cari" (🔍), "Kirim", "Berikutnya", atau "Selesai"?
Nilai enterkeyhint | Tampilan Tombol Enter di Ponsel | Gunakan Pada |
|---|---|---|
search | Ikon Kaca Pembesar / "Cari" | Kotak pencarian (<input type="search">). |
send | "Kirim" / Ikon Pesawat Kertas | Kotak ketik pesan obrolan (chat) atau komentar cepat. |
next | "Berikutnya" (→) | Kolom formulir yang masih memiliki kolom lanjutan di bawahnya. |
done | "Selesai" (✓) | Kolom terakhir pada formulir. |
go | "Buka" / "Masuk" | Bilah alamat URL atau input kode akses langsung. |
B. autocapitalize dan spellcheck
Pada ponsel pintar, papan ketik secara bawaan selalu mengubah huruf pertama yang diketik menjadi huruf kapital (autocapitalize="sentences"), serta menggarisbawahi kata yang tidak ada di kamus (spellcheck="true"). Perilaku ini sangat mengganggu ketika pengguna sedang mengetik nama pengguna (username), kode perintah terminal, alamat server, atau kode kupon!
<!-- Mematikan kapitalisasi otomatis dan pemeriksa ejaan kamus untuk input teknis --> <label for="input-perintah">Ketik Perintah Shell Linux</label> <input type="text" id="input-perintah" name="command" autocapitalize="none" autocomplete="off" spellcheck="false" enterkeyhint="send" >
2. Penyuntingan Langsung di Tempat dengan contenteditable
Atribut global contenteditable mengubah elemen HTML biasa (seperti <div>, <p>, atau <td>) menjadi area yang teksnya dapat langsung disunting oleh pengguna:
contenteditable="true": Mengizinkan penyuntingan kaya (rich text). Namun, kelemahan besarnya adalah ketika pengguna menyalin-tempel (paste) teks dari situs lain atau Microsoft Word, peramban ikut menyisipkan puluhan tag<span style="font-family: Comic Sans...">yang mengotori DOM Anda!contenteditable="plaintext-only"(Baseline Newly Available sejak Maret 2025, ketika Firefox ikut mendukungnya di semua peramban utama): Mengizinkan penyuntingan teks murni saja! Ketika pengguna melakukan paste, seluruh pemformatan HTML luar otomatis dibuang dan hanya teks bersih yang masuk!
<div class="catatan-cepat" contenteditable="plaintext-only" role="textbox" aria-multiline="true" aria-label="Catatan pribadi modul ini" spellcheck="true" >Ketik catatan belajar Anda langsung di sini...</div>
contenteditableJika Anda benar-benar hanya membutuhkan kotak masukan teks multi-baris, selalu utamakan <textarea> asli (karena sudah mendukung pengiriman <form>, atribut name, dan dikenali semua pembaca layar). Gunakan contenteditable="plaintext-only" hanya untuk komponen khusus yang membutuhkan penyuntingan langsung di dalam struktur kartu/tabel, dan selalu tambahkan role="textbox" serta aria-label!
3. Atribut draggable="true" untuk Drag and Drop
Secara bawaan di HTML, hanya gambar (<img>) dan tautan (<a href="...">) yang dapat diseret dengan tetikus. Untuk membuat kartu papan tugas (Kanban board) dapat diseret menggunakan HTML Drag and Drop API, tambahkan atribut draggable="true" (dan jangan lupa sediakan tombol alternatif atas/bawah bagi pengguna papan ketik!).
Latihan Praktik: Antarmuka Chat Teknis & Editor Catatan Bersih
Buatlah berkas interaksi-global.html:
- Buat kotak input perintah terminal dengan
autocapitalize="none",spellcheck="false", danenterkeyhint="send". - Buat kotak catatan cepat dengan
contenteditable="plaintext-only",role="textbox", danaria-label. Uji dengan menyalin teks berwarna/tebal dari halaman web lain ke dalamnya untuk membuktikan bahwa hanya teks murni yang tertempel!