【html】可以编辑的div contenteditable属性

代替input的文本编辑器

有时，我们不想使用input/textarea，但又希望标签的内容支持编辑。这时，可以使用html5的contenteditable属性。
contenteditable是全局属性，可以放在任意标签上，如div，p ，span等

写法一： <div contenteditable="true">这是一个div标签，点击可以编辑</div>
写法二： <div contenteditable>这是一个div标签，点击可以编辑</div>

预览效果

事件和样式处理

带有contenteditable的标签和input类似
我们可以把它看作input进行处理，监听它的相关事件，修改默认样式

// 去除默认outline 
[contenteditable]:focus{
	outline: none;
}