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.

8 komentar

mantap gan, ijin coba eheh
Reply Delete
[placeholder]:empty:not(:focus):before maksudnya:

:empty hanya jika area tidak ada isinya
:not(:focus) hanya jika area tidak ada kursor

:)
Reply Delete
Iya benar sekali kang taufik, saya fikir css pseudeo adalah salah satu jalan yang paling baik. Dan juga mengingat bahwa css pseudo tidak ada batasnya 0:)
HTML sama C++ beda dikit ya gan?
Reply Delete
Tentu bahkan sangat berbeda. C++ itu adalah bahasa pemograman. Dan prbih mirip mirip dengan Javascript ^_^
ijin belajar mastah. Saya nyimak dulu soalnya masih newbie dalam hal coding
Reply Delete

Posting Komentar

no Spam :)

Cancel Reply