การทำ Placeholder ให้กับ div หรืออื่นๆ

A
<p>ตัว <code>html</code> นี้ มันจะมี <code>attribute</code> ตัวนึงที่ไว้สำหรับทำพวก element block ให้สามารถแก้ไขข้อความได้ นั่นก็คือ contenteditable ซึ่งถ้าเราเอาไปเซ็ตใส่ พวก <code>div</code> หรือตัวอื่นๆ จะทำให้ block นั้นๆ สามารถแก้ไขเนื้อหาได้ ราวกับว่ามันเป็น <code>input</code> (แถวดีกว่าด้วย ตรงที่ใส่ รูปแบบได้ ก๊อปตัวหนาไปวาง ก็ได้ตัวหนา เลย)</p> <p>ทีนี้ <code>input</code> มันก็จะมี <code>placeholder</code> ซึ่งคือการที่ เมื่อค่า <code>value</code> มันว่าง ก็จะให้แสดงข้อความนี้แทน เพื่อให้ผู้ใช้งานรู้ว่า ช่องนี้เอาไว้ทำอะไร หรือต้องกรอก อะไร ตัวอย่างแบบในรูป</p> <p style="text-align: center;"><img src="/usercontents/image/UWNYSmtBaWpTNitNTWhWc3Eyd0drcmpnOVVXVlYrUnhpQXVTTjVGMGcrQXQ5czVpM2VnM0dIcHFPZms1My9XY0VMWFg3UklFengwRllLdXU3L0k3eEcyamJ4WmI3ejJleFgvL2hXaXdDMW1HM0YyQW1sdFlJdE1hancyNmN5VlI," /> <img src="/usercontents/image/UWNYSmtBaWpTNitNTWhWc3Eyd0drcmpnOVVXVlYrUnhpQXVTTjVGMGcrQXQ5czVpM2VnM0dIcHFPZms1My9XY0VMWFg3UklFengwRllLdXU3L0k3eEY4Mzk1b3JXWWsxbmQ4Q1VQMFNUMU9haHhOb3BGWHdzWVBQZEVMRU9Fd1E," /> <img src="/usercontents/image/UWNYSmtBaWpTNitNTWhWc3Eyd0drcmpnOVVXVlYrUnhpQXVTTjVGMGcrQXQ5czVpM2VnM0dIcHFPZms1My9XY0VMWFg3UklFengwRllLdXU3L0k3eENaK0FkWmduZ3JOUkRLNWlmbDhHSHRmdXFHNnRPL2M1NzNTbW1OOW1jYmI," /></p> <p>ถ้าเราอยากเอามาใส่ใน <code>div</code> บ้างล่ะทำยังไง , ง่ายนิดเดียวครับ ใช้ css ตามนี้</p> <pre class="language-bash"><code>[contentEditable=true]:empty:not(:focus):before { color: grey; content: attr(data-text) } </code></pre> <p>และใน div เราก็กำหนดค่าตามนี้</p> <pre class="language-bash"><code>&lt;div contenteditable="true" data-text="แก้ไขชื่อหัวข้อ"&gt;&lt;/div&gt; </code></pre> <p>จากนั้น เราก็จะได้แบบเดียวกับในรูปเด๊ะเลย , จบครับ</p>
INFO
Beta Version v20.12.15 : ขออภัยเว็บกำลังก่อสร้าง (อีกแล้ว) แต่คราวนี้กำลังสร้างจริงจังละ