Artikel ini membahas cara menangani peristiwa perubahan yang dapat diedit dalam JavaScript dan menjelaskannya dengan bantuan sebuah contoh.
Bagaimana Menangani Peristiwa Perubahan yang Dapat Diedit dalam JavaScript?
Contenteditable adalah atribut yang disebutkan. Pengguna dapat membuat perubahan pada konten dengan mempertimbangkan kebutuhannya. Jika diperbolehkan, browser mengubah widgetnya untuk memungkinkan modifikasi elemen.
Nilai-Nilai Apa yang Dibolehkan oleh Peristiwa Perubahan yang Dapat Diedit?
Konten yang dapat diedit dapat mengambil salah satu dari nilai berikut:
- plaintext-only menyatakan bahwa teks asli dapat diedit meskipun format teks kaya dinonaktifkan.
- String kosong atau true yang berarti elemen tersebut dapat diedit.
- false menyiratkan bahwa elemen tersebut tidak dapat diedit.
Contoh
Contoh berikut menjelaskan bagaimana konten yang dapat diedit dapat digunakan pada halaman web. Mari kita lihat kode di bawah ini untuk memahaminya dengan lebih baik:
HTML
Berikut adalah kode HTML yang menjelaskan penggunaan peristiwa perubahan yang dapat diedit:
< blockquote dapat diedit = 'BENAR' >
< h3 > EDIT KONTEN ANDA DI SINI! < / h3 >
< / blockquote >
Dalam kode HTML di atas:
- Tag blockquote dibuat dengan atribut contenteditable yang disetel ke true. Ini akan memungkinkan konten di dalam tag blockquote untuk diedit.
- Tag h3 ada di dalam tag blockquote. Dikatakan “EDIT KONTEN ANDA DI SINI!”, seperti yang ada di dalam
, yang berarti konten dapat diedit oleh pengguna.
CSS
Untuk membuat kode kami menarik secara visual, kami telah menggunakan kode CSS berikut:
blockquote {
latar belakang : buah persik ;
radius perbatasan : 10 piksel ;
batas : 10 piksel ;
}
blokquote h3 {
lapisan : 10 piksel ;
}
Dalam kode CSS di atas:
- Latar belakang tag blockquote diatur memiliki warna peach dengan radius batas 10px dan margin 10px.
- Judul h3 di dalam blockquote diatur memiliki padding 10px.
Keluaran :
Output berikut menjelaskan bagaimana konten dapat diedit menggunakan peristiwa perubahan contenteditable di JavaScript:
Pentingnya Mengedit Konten
- Peningkatan interaktivitas karena pengguna dapat memodifikasi konten dengan nyaman.
- Penyesuaian yang mudah sebagai pemrogram dengan bantuan JavaScript dapat menciptakan perilaku yang dimodifikasi seperti penyimpanan otomatis, memicu tindakan berbeda berdasarkan masukan pengguna.
- Membantu menyederhanakan proses pengeditan sehingga memungkinkan pengguna mengedit secara dinamis tanpa memerlukan kolom teks terpisah.
Kesimpulan
Peristiwa perubahan yang dapat diedit dalam JavaScript memungkinkan pengguna untuk memodifikasi konten sehingga menjadikan halaman web responsif dan dapat disesuaikan. Hal ini membuka jalan menuju pengembangan web yang berpusat pada pengguna di mana pengguna dapat mengedit konten pada halaman web secara real-time sehingga memungkinkan pengalaman pengguna yang lebih responsif. Artikel ini membahas cara menangani peristiwa perubahan yang dapat diedit dalam JavaScript dan menjelaskannya dengan bantuan sebuah contoh.