Membuat Konten Halaman Web Dapat Diedit oleh Pengunjung Situs

Membuat teks di situs web yang dapat diedit oleh pengguna lebih mudah daripada yang Anda harapkan. HTML menyediakan atribut untuk tujuan ini: bisa di isi.

Itu bisa di isi atribut 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 kemungkinan nilai:benar, Salah dan mewarisi. Mewarisi adalah nilai default, yang berarti bahwa elemen tersebut mengambil nilai dari induknya. Demikian juga, setiap elemen turunan dari konten Anda yang baru diedit juga akan dapat diedit kecuali Anda mengubah nilainya Salah. Misalnya, untuk membuat DIV elemen yang 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 berbutir dan tidak beraturan bernama myTasks: Beberapa tugas Tugas lain


Tambahkanbisa di isi atribut 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.  Contoh ini menggunakan Google CDN, tetapi Anda dapat menghostingnya sendiri atau menggunakan CDN lain jika Anda mau.


Di bagian bawah halaman Anda, tepat di atas tag, tambahkan skrip Anda:  Ini adalah awal dari jQuery document.ready berfungsi dan memberi tahu browser untuk memuat skrip ini setelah dokumen dimuat sepenuhnya.


Di dalam document.ready berfungsi, tambahkan skrip Anda untuk memuat tugas ke localStorage dan dapatkan tugas apa pun yang disimpan di sana sebelumnya: $ (document.ready (function () {

 $ ("# myTasks"). blur (function () {// ketika kursor meninggalkan elemen #myTasks 
 
 
 localStorage.setItem ('myTasksData', this.innerHTML); // simpan ke localStorage
  
 
 });
  
 
 if (localStorage.getItem ('myTasksData')) {// jika ada konten di localStorage
  
 
 $ ("# myTasks") .html (localStorage.getItem ('myTasksData')); // letakkan konten di halaman
  
 
 }
  });

HTML untuk seluruh halaman terlihat seperti ini:

Tugasku

`Tugasku`



Masukkan item untuk daftar Anda. Browser akan menyimpannya untuk Anda, sehingga ketika Anda membuka kembali browser Anda, itu akan tetap ada di sini.


Beberapa tugas

Tugas lain