Menggunakan Atribut yang Dapat Disunting
Membuat teks di situs web yang dapat diedit oleh pengguna lebih mudah daripada yang Anda harapkan. HTML menyediakan atribut untuk tujuan ini: konten yang dapat diedit.
Atribut contenteditable pertama kali diperkenalkan pada tahun 2014 dengan rilis HTML5 . Ini menentukan apakah konten yang diaturnya dapat diubah oleh pengunjung situs dari dalam browser.
Dukungan untuk Atribut yang Dapat Disunting
Sebagian besar browser desktop modern mendukung atribut.
Ini termasuk:
- Chrome 4.0 dan lebih tinggi
- Internet Explorer 6 dan lebih tinggi
- Firefox 3.5 dan lebih tinggi
- Safari 3.1 dan lebih tinggi
- Opera 10.1 dan lebih tinggi
- Microsoft Edge
Hal yang sama berlaku untuk sebagian besar peramban seluler juga.
Cara Menggunakan Konten yang Dapat Diedit
Cukup tambahkan atribut ke elemen HTML yang ingin Anda buat dapat diedit. Ini memiliki tiga nilai yang mungkin: benar, salah, dan mewarisi. Mewarisi adalah nilai default, yang berarti bahwa elemen tersebut mengambil nilai dari induknya. Demikian pula, setiap elemen turunan dari konten Anda yang baru diedit juga akan dapat diedit kecuali Anda mengubah nilainya ke false. Misalnya, untuk membuat elemen DIV dapat diedit, gunakan:
Buat Daftar Agenda yang Dapat Diedit Dengan Dapat Diedit
Konten yang dapat diedit sangat masuk akal ketika Anda memasangkannya dengan penyimpanan lokal, sehingga konten tetap ada di antara sesi dan kunjungan situs.
- Buka halaman Anda dalam editor HTML.
- Buat daftar berbaris , tidak berurutan bernama myTasks :
- Beberapa tugas
- Tugas lain
- Beberapa tugas
- Tambahkan atribut contenteditable ke elemen
- :
Anda sekarang memiliki daftar tugas yang dapat diedit — tetapi jika Anda menutup browser atau meninggalkan halaman, daftar Anda akan hilang. Solusinya: Tambahkan skrip sederhana untuk menyimpan tugas ke localStorage. - Tambahkan tautan ke jQuery di dokumen Anda.