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;
}