contenteditable 表示元素是否可被用户编辑，如果可以，浏览器会修改元素的部件以允许编辑。
contenteditable是一个枚举属性，并非布尔属性，也就是说并不建议缩写成<div contenteditable>，而是需要写成<div contenteditable="true">。 使用的方式如下例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
#app{
padding: 8px 12px;
margin: 50px 40px;
border: 1px solid #dcdcdc;
border-radius: 3px;
/* 设置 contenteditable 后可以设置光标或其他属性 */
caret-color: red;
outline: none;
}
</style>
</head>
<body>
<div id="app" contenteditable="true">
edit this content
</div>
</body>
</html>
使用 contenteditable编辑属性毕竟不是input 标签，许多属性是没有的，比如 placeholder , 或者框架的双向绑定是无法使用的，我们需要做一些处理来手动支持一下这些需求，如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<style>
#app{
padding: 8px 12px;
margin: 50px 40px;
border: 1px solid #dcdcdc;
border-radius: 3px;
/* 设置 contenteditable 后可以设置光标或其他属性 */
outline: none;
caret-color: red;
}
/* #app为空时显示placeholder */
#app:empty:before {
content: attr(placeholder);
color: #aaa;
}
</style>
</head>
<script src="http://vuejs.org/js/vue.js"></script>
<body>
<!-- @blur比input更节流，我们并不需要给div里赋值，只需要拿到div的值即可 -->
<div id="app" contenteditable=true placeholder="this is placeholder" @blur="handleInput"></div>
<script>
new Vue({
el: '#app',
data(){
return {
val: ''
}
},
methods: {
handleInput($event){
this.val = $event.target.innerText
}
}
})
</script>
</body>
</html>
除了自适应的 textarea ，该属性还可以用于富文本编辑器，是个很不错很方便的属性，兼容性如下：
image.png
接下来聊聊我对这个属性的看法，这个属性确实方便了我们，但是容易混淆hmtl标签，从html语义化标签来说，慎用contenteditable属性，
以上。
网友评论