Contenteditable Alternatif Elemen Input pada HTML

Contenteditable Alternatif Elemen Input pada HTML
Pada kali ini Males code akan menjelaskan tentang Contenteditable Alternatif Elemen Input pada HTML. Dimana penggunakan tag contenteditable='' ini dapat membuat elemen yang kita inginkan dapat kita ubah kontennya seperti teks layaknya elemen input yang biasa kita lihat.
Pada tag contenteditable='true|false' ini terdapat 2 value, yaitu true untuk membuat fungsi ini berjalan & sedangkan false sebaliknya.
Penggunaannya cukup mudah, hanya cukup menambahkan tag contenteditable='true|false' pada elemen yang kita inginkan.

Contoh contenteditable pada elemen paragraf
<p contenteditable="true|false">Ini adalah elemen paragraf yang bisa diedit.</p>
Ketika attribut contenteditable='true|false' tidak diatur pada elemen, maka elemen akan mewarisi style/gaya dari elemen induknya.
Lalu bagaimana dengan Placeholder??
Seperti yang kita ketahui juga, bahwa tag placeholder='' ini hanya bekerja dielemen input, namun ada beberapa hal yang perlu dilakukan agar placeholder bisa bekerja dielemen lain sesuai yang kita inginkan.

Tentunya dengan menambahkan tag placeholder='teks' pada elemen yang kita inginkan.

Kemudian tambahkan css ini:
[placeholder]:empty:not(:focus):before{
  content: attr(placeholder);
}

Sekian tentang artikel Contenteditable Alternatif Elemen Input pada HTML ini semoga dapat menambah wawasan anda dalam HTML. Jika ada Saran/Pertanyaan silahkan disuguhkan pada kolom komentar yang tersedia. Sekian & Terima Kasih.