前言

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

     },

   },

}; 

代码片段

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐