Blog yang berisi seputar kode-kode web pada platform blogger.

Cari blog ini

Contenteditable Alternatif Elemen Input pada HTML

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.
Rizky

hanya sefruit manusia yang masih giat belajar

Medan, North Sumatera, Indonesia

8 komentar

Posting Komentar

no Spam 🙂

Batal Membalas