有趣的contentEditable属性，实现div可编辑

最新推荐文章于 2024-06-04 16:52:53 发布
最新推荐文章于 2024-06-04 16:52:53 发布
阅读量2.1k 收藏 3
点赞数
分类专栏： react 文章标签： html react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjw0021/article/details/115472670
版权

当需求需要在文本输入中加入一些样式，并按删除键遇到某些样式的为多个文字整体删除，使用textArea是无法实现的，textArea中没有办法写单独样式，或者加入其他标签和组件。这时候就需要使用到contentEditable属性，将div或者一些其他标签可编辑。

这样便可以简单实现一个可编辑的div，需要作为整体补课编辑的子元素contentEditable设置为false便可以实现回车之后一整个删除，但是此时控制地台会报一个警告，如下图

需要加上suppressContentEditableWarning属性

 

写个简单Demo

当点击添加按钮的时候，输入框汇总的内容添加进输入框中，并带样式（这里的样式就用antd的Tag标签）

最低0.47元/天 解锁文章
土匪丁的窝子
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div+contenteditable 实现富文本发布框的小结
weixin_34345753的博客
03-10 1683
效果图和实现的功能 实现的效果图如下，主要实现的功能有 表情的插入 插入话题之后部分文字选中 文本框高度自适应 发送消息，获取发送框中的纯文本内容 placeholder的实现 输入文字的计数面板 代码地址传送门 代码实现Vue 灵感来源 “你想做的一定有人做了，你一定不是第一个遇到这个问题的人”——这句话对80%（二八分布）的人是有效的，我也从中获益不少。 我的第一份参考案例是qq空间的说...
contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作
codingWeb的博客
11-07 8644
这周碰到一个骚东西，contentEditable ，它是用来指定一个元素是否是可编辑的，这也是富文本编辑器实现的底层支持，网上关于这部分东西的资料比较少或者不全，所以我来整理下关于这个属性，和可编辑区域的一些操作吧，比如获取光标位置，设置光标，往可编辑区域光标处插入内容等等 HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素
div可编辑，contenteditable 属性
热门推荐
前进者
02-14 3万+
1、添加contenteditable属性让文本处于可编辑状态， 实例 <divcontenteditable="true">这里可以编辑</div> contenteditable: "inherit";(默认) contenteditable: "plaintext-only";(输入纯文本) contenteditable: "true"; contente
div可编辑属性contenteditable实现富文本编辑器
weixin_49409651的博客
10-12 491
div可编辑属性contenteditable实现富文本编辑器 - 简书
contenteditable实现插入标签的输入框功能（Vue3版）
最新发布
小阮的笔记本
06-04 454
contenteditable实现插入标签的类输入框功能
【Vue】div标签实现输入框，利用contenteditable=“true“属性的标签实现
强者惜字如金，弱者废话连篇！
07-26 3560
【代码】div标签实现输入框，利用contenteditable=“true“属性的标签实现评论。
div可编辑之contenteditable属性
weixin_34235135的博客
12-11 571
2019独角兽企业重金招聘Python工程师标准>>> ...
electron+vue实现div contenteditable截图功能
10-15
`contenteditable`属性允许我们将HTML元素变成可编辑区域，用户可以直接在div内输入文本，类似于一个简单的文本编辑器。 在传统的实现方式中，我们可能会使用`input`或`textarea`元素，通过插入特殊标签来代表表情...
如何让DIV可编辑、可拖动示例代码
09-05
以下是如何实现 `DIV` 可编辑和可拖动的详细步骤和知识点。 1. **可编辑（ContentEditable）**： HTML5 引入了一个非常有用的特性，即 `contentEditable` 属性。当我们将 `contentEditable` 属性设置为 `"true"` ...
设置contenteditable属性可编辑HTML标签的内容(可代替textarea)
12-13
contenteditable属性兼容所有浏览器（IE6之前的版本是否兼容未测试） 在有些时候我们完全可以用DIV去替代input或者textarea来达到同样的效果，例如，在使用ajax的时候，在提交表单时我们可以获取DIV的内容。 细心的...
vue项目中在可编辑div光标位置插入内容的实现代码
10-15
首先，我们需要一个可编辑的div元素，通过设置`contenteditable="true"`属性来使其变为可编辑。以下是一个简单的HTML结构： ```html <div contenteditable="true" @drop="dropRelease($event)" @dragover=...
在可编辑div中插入文字或图片解决思路与实现步骤
12-13
最近在网上碰到一个人问了我一个问题，在可...要使div可编辑 必须 加入 contentEditable="true" 这个属性。 然后就是获取光标位置(或者选择文字位置)进行文字或者html的插入 。 由于火狐等标准浏览器支持getSelectio
contentEditable与suppressContentEditableWarning
qq_32615575的博客
08-18 1186
contentEditable=true 意为该dom元素可以被编辑 在react中对元素使用contentEditable= true 会发出警告； 可以使用suppressContentEditableWarning属性去除，列如 <div suppressContentEditableWarning contentEditable="true" orignalnum={item.userNum}>{item.userNum}</div> ...
contentEditable 中光标控制
shenwen5225的博客
01-22 4939
文章目录简易 div 输入框1.获取光标位置2.设置光标位置3.设置选中区域4.获取选中内容5.在光标处插入内容 简易 div 输入框 HTML5规范引入了 contenteditable 属性，它几乎可以用在任何元素上，只要添加这一属性 即可变为可编译区域。查看详情 一个简单的 <div> 输入框： <style> .editdiv{ min-heigh...
div的contenteditable=true;属性使其可编辑
hangGe0111的博客
07-30 1901
1.true可编辑 2.false不可编辑   http://www.w3school.com.cn/tags/att_global_contenteditable.asp 3.plaintext-only只能输入纯文本 4.更多参考   https://w3c.github.io/editing/contentEditable.html#contenteditable 5.代码和展示...
chrome可输入div contenteditable 回车自动生成div替换为＜br/＞
weixin_39168678的博客
10-14 2167
在chrome黏贴进富文本的内容会自动生成span包裹， 如图 监听回车事情并重置浏览器行为 dom.addEventListener('keypress', (e) => { if (e.code === 'Enter') { document.execCommand('insertHTML', false, '<br/>&zwnj;'); e.preventDefault() } }) 注意： 为了保.
html，js div开启contenteditable属性可编辑时，按回车键会出现div，如何禁止生成
PrimaryColor
03-12 4716
div开启contenteditable属性时，当前div变成了一个可编辑的状态，按下回车键会生成一个div，如何禁止生成： 方案一：让改元素以下只显示文本就不会显示其他标签了 .read-write-plaintext-only { //纯文本 -webkit-user-modify: read-write-plaintext-only; } 方案二：通过jquery的事件，手动生成标签 $('#chat_editor[contenteditable]').keydown(functi
div标签的contenteditable属性实现input效果以及控制input的聚焦失焦
楚楚梦厦的博客
11-10 5326
在触屏(移动端网页)中，聊天室类型的输入框很常见，但是很多都是自定义样式的，直接改造input标签会很麻烦。 给div标签设置contenteditable属性可以达到input标签的效果还能轻松的自定义样式。 利用input事件和v-text可以达到动态绑定“input”输入框的效果 利用focus和blur方法可以控制“input”输入框的键盘展开收起 <div contenteditable="true" ref="inputMsg" v-text="inputText" @input="i
React：div可编辑后，点击按钮插入标签
QY_99的博客
08-25 1694
React：div可编辑后，点击按钮插入标签，contentEditable， 实现一个文本框，既可输入，有可插入标签。TextArea显然是不可的，它是文本输入框，想添加dom是不可以的，于是解决思路就想到了，给div添加属性contentEditable，变成可输入，实现一个编辑器。...
div contenteditable
12-11
div contenteditable是一种HTML属性，它允许用户在div元素中编辑文本。通过将contenteditable属性设置为“true”，用户可以在div元素中输入和编辑文本。以下是一个简单的例子： ```html <div contenteditable="true"> 这是一个可编辑的div元素。 </div> ``` 在这个例子中，用户可以在div元素中编辑文本。除了“true”之外，contenteditable属性还可以设置为“false”、“plaintext-only”、“caret”、“events”等值，以控制用户在元素中编辑文本的方式。例如，将contenteditable属性设置为“plaintext-only”将限制用户只能输入纯文本，而将其设置为“false”将禁用编辑功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值