<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><div contenteditable="true" data-text="แก้ไขชื่อหัวข้อ"></div>
</code></pre>
<p>จากนั้น เราก็จะได้แบบเดียวกับในรูปเด๊ะเลย , จบครับ</p>