contentEditable属性

前言

我们最常用的输入文本内容便是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);

     },

   },

}; 

代码片段