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>

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

代码片段

contentEditable属性相关推荐

CSS中的contenteditable属性
contenteditable属性:使一个元素变为可编辑的状态 contenteditable="true" #开启文本编辑 contenteditable="false ...
contenteditable属性让div也可以当做输入框
你知道div也可以当做输入框么? H5的全局属性contenteditable,带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调 ...
vue实现带样式的textarea输入框，contenteditable属性应用
提示:vue中使用contenteditable 文章目录前言一.contenteditable 什么是contenteditable: 二.contenteditable的使用总结前言开发 ...
2.2.1新增-contentEditable属性
<!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content=& ...
android H5+app混合应用之 - contenteditable属性
现在是智能终端遍天下,各种APP如雨后春笋般,掘地突起.这让我们做前端的兄弟姐妹们有些忙不过来,一边忙学习各种新知识如H5.CSS3.JS 等,一边面对着各种需求问题,PC端好不容易能弄的差不多了,现 ...
html光标自动定位到文本框,html元素contenteditable属性如何定位光标和设置光标
最近在山寨一款网页微信的产品,对于div用contenteditable属性做的编辑框有不少心得,希望可以帮到入坑的同学. 废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整 ...
div可编辑，contenteditable 属性
1.添加contenteditable属性让文本处于可编辑状态, 实例 <div contenteditable="true">这里可以编辑</div> c ...
可编辑属性html,设置contenteditable属性可编辑HTML标签的内容(可代替textarea)
摘要:这篇HTML栏目下的"设置contenteditable属性可编辑HTML标签的内容(可代替textarea)",介绍的技术点是"contenteditable.t ...
HTML contenteditable 属性
今天无意中看到这个属性,特此记录一下. 浏览器支持所有主流浏览器都支持 contenteditable 属性定义和用法 contenteditable 属性指定元素内容是否可编辑. 注意: 当元素 ...

contentEditable属性

前言

contentEditable属性

兼容性

使用

项目中

contentEditable属性相关推荐

最新文章

热门文章