H5 contenteditable 可编辑区域 以及 实现 placeholder

一：H5 元素内容可编辑

contenteditable 是可以在元素上设置以使内容可编辑的属性。它适用于 DIV、P、UL 等元素。您必须指定它，例如，<element contenteditable="true|false">。

注意: 当contenteditable元素上没有设置属性时，它将从其父元素继承。

<h2> Shoppping List(Content Editable) </h2>
<ul class="content-editable" contenteditable="true">
     <li> 1. Milk </li>
     <li> 2. Bread </li>
     <li> 3. Honey </li>
</ul>

你可以从这里玩它：https://wanghao221.github.io/html-tips-tricks/content-editable/.

————————————————
版权声明：本文为CSDN博主「海拥✘」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_44273429/article/details/118487938.

二：可编辑区域（contenteditable）实现 placeholder

实现方法很简单，添加以下 css 即可：

    <div class='input' contenteditable placeholder='请输入文字'></div>

	<style>
	    .input:empty::before {
	        content: attr(placeholder);
	    }
    </style>

————————————————
原文链接：https://www.jianshu.com/p/a4576f840697.