前言
我们最常用的输入文本内容便是input与textarea，但是有一个属性，可以让我们在很多标签中，如div,table,p,span,body等，可以像input输入框一样，实现文本编辑，这便是contentEditable属性
contentEditable属性
微软开发，被其他浏览器反编译并且投入应用的一个全局属性
该属性的功能是允许用户编辑元素中的内容//所以这个元素必须是可以获得鼠标焦点的元素，并且在点击鼠标后要向用户提供一个插入符号，提示可编辑
contenteditable=“true” #开启文本编辑
contenteditable=“false” #关闭文本编辑，该字段的值缺失时，效果和这个是一样的
contenteditable=“inherit” #(默认）表明该元素继承了其父元素的可编辑状态
下图属性一览，部分属性值存在兼容性 developer.mozilla.org/zh-CN/docs/…
兼容性
基本上完美支持市面上浏览器，即使刚刚退役的IE浏览器
使用
1、只需要在标签上contentEditable为true，即可实现编辑
这是一个段落。是可编辑的。尝试修改文本。
2、contenteditable="inherit"的使用
<div contenteditable="true">
<p>这是一个子段落</p>
<p>这是一个子段落</p>
</div>
项目中
在项目中，总是需要文本显示与文本编辑，通常的做法是文本标签+input
如：在vue中
如果我们使用contenteditable，就不再需要input输入框
[代码片段](https://code.juejin.cn/pen/7111225356530483236)
那么，问题来了，如何保存数据？
通过失焦事件blur
<div id="divInput" class="txt" contenteditable="true">
<p>这是一个子段落</p>
<p>这是一个子段落</p>
</div>
JS
var divInput = document.getElementById("divInput");
divInput.addEventListener("blur", function (event) {
console.log("div失去焦点2222---", event, event.target);
});
如果是在vue项目中，对标签设置了contenteditable为true，相应的添加失焦事件，然后再用$set改变就可以
<div class="count">
<div contenteditable="true"
v-for="(n, index) in list" :key="n"
@blur="handleBlur(index, $event)">{{n}}</div>
</div>
export default {
data() {
return {
list: ['这是1', '这是2', '这是3']
};
},
methods: {
handleBlur(index, event) {
this.$set(this.list, index, event.target.innerText);
console.log(this.list);
},
},
};
代码片段
