Males Code

Contenteditable Alternatif Elemen Input pada HTML

Januari 14, 2016
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

Reply Cancel
Mohon Maaf, Komentar Blogger sedang bermasalah...
mantap gan, ijin coba eheh
Delete
Reply Cancel
Mohon Maaf, Komentar Blogger sedang bermasalah...
[placeholder]:empty:not(:focus):before maksudnya:

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

:)
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:)
Delete
Reply Cancel
Mohon Maaf, Komentar Blogger sedang bermasalah...
HTML sama C++ beda dikit ya gan?
Delete
Tentu bahkan sangat berbeda. C++ itu adalah bahasa pemograman. Dan prbih mirip mirip dengan Javascript ^_^
Delete
Reply Cancel
Mohon Maaf, Komentar Blogger sedang bermasalah...
Reply Cancel
Mohon Maaf, Komentar Blogger sedang bermasalah...
ijin belajar mastah. Saya nyimak dulu soalnya masih newbie dalam hal coding
Delete
Reply Cancel
Mohon Maaf, Komentar Blogger sedang bermasalah...

Blog ini tidak menerima komentar via OpenID atau Anonim.
Link aktif akan secara otomatis terhapus oleh sistem.
Untuk memasukkan link dengan aman, gunakan kode [url=http://sites.com]Teks Link[/url]
Untuk memasukkan kode, gunakan kode <i rel="code">Kode Kamu</i>
Untuk memasukkan kode yang panjang, gunakan kode <i rel="pre">Kode Panjang Kamu</i>
Untuk menyisipkan gambar, gunakan kode [img]Url Gambar[/img]
Untuk memasukkan title, gunakan kode <b rel="h4">Title kamu ...</b>
Untuk memberikan efek huruf tebal pada teks, gunakan kode <strong>Teks Kamu ...</strong>
Untuk memberikan efek huruf miring pada teks, gunakan kode <em>Teks Kamu ...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

Emotikon
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p*

Add CommentsCancel Comments
Mohon Maaf, Komentar Blogger sedang bermasalah...