We come with the latest version 1.6, get this theme through our official site.

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

Thank gan.
Nice deh

Anonim

mantap gan, ijin coba eheh

Taufik Nurrohman

[placeholder]:empty:not(:focus):before maksudnya:

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

:)


Rizky Kurniawan

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:)

Bayuaji Hadiyanto

HTML sama C++ beda dikit ya gan?


Rizky Kurniawan

Tentu bahkan sangat berbeda. C++ itu adalah bahasa pemograman. Dan prbih mirip mirip dengan Javascript ^_^

Kang Rian

Expert nih.. :D

Soma

ijin belajar mastah. Saya nyimak dulu soalnya masih newbie dalam hal coding

Rizky Kurniawan

tes berkomentar dari vue


Rizky Kurniawan

Komentar ini telah dihapus oleh pengarang.

Yuk Diskusi

Kalau ada pertanyaan yuk kita diskusikan