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

最新推荐文章于 2024-02-23 15:36:09 发布
最新推荐文章于 2024-02-23 15:36:09 发布
阅读量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 1678
效果图和实现的功能 实现的效果图如下，主要实现的功能有 表情的插入 插入话题之后部分文字选中 文本框高度自适应 发送消息，获取发送框中的纯文本内容 placeholder的实现 输入文字的计数面板 代码地址传送门 代码实现Vue 灵感来源 “你想做的一定有人做了，你一定不是第一个遇到这个问题的人”——这句话对80%（二八分布）的人是有效的，我也从中获益不少。 我的第一份参考案例是qq空间的说...
react-div-contenteditable:React钩子组件，用于纯文本的内容可编辑div
03-29
React Div ContentEditable 该软件包为内容可编辑的div提供了一个小的功能性React组件，该div限于纯文本（不格式化“粗体”，“斜体”等）。 安装 npm install @mroc/react-div-contenteditable 例子 import DivContentEditable from "@mroc/react-div-contenteditable"; ... <DivContentEditable value={text0} placeholder="Type here..." autoFocus={true} lastCaretRect={undefined} onClick={hndleClick} onInput={handleIn
div可编辑，contenteditable 属性
热门推荐
前进者
02-14 3万+
1、添加contenteditable属性让文本处于可编辑状态， 实例 &lt;divcontenteditable="true"&gt;这里可以编辑&lt;/div&gt; contenteditable: "inherit";(默认) contenteditable: "plaintext-only";(输入纯文本) contenteditable: "true"; contente
vue中使用可编辑div（contenteditable属性）详细教程
weixin_43947536的博客
05-13 9412
可编辑的div的实际操作demo
div标签可编辑Contenteditable属性开启为input框输入Vue代码示例数据绑定
最新发布
webnoties的专栏
02-23 630
div标签可编辑Contenteditable属性开启为input框输入Vue代码示例。
ContentEditable DIV – 禁用拖放
weixin_47640774的博客
01-04 203
在本文中，我们介绍了HTML中的ContentEditable属性，并展示了如何禁用ContentEditable元素的拖放功能。通过使用相关的事件，我们可以轻松地禁用拖放功能，以适应特定的需求。使用ContentEditable元素，我们可以创造出类似于常规的文本编辑器的体验，并且通过禁用拖放功能，我们可以更好地控制用户在网页上的操作。上述代码将选择所有ContentEditable元素，并将它们的on drop和on dragover事件设置为”return false”，以禁用拖放功能。
如何让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
div可编辑属性contenteditable实现富文本编辑器
weixin_49409651的博客
10-12 454
div可编辑属性contenteditable实现富文本编辑器 - 简书
【Vue】div标签实现输入框，利用contenteditable=“true“属性的标签实现
强者惜字如金，弱者废话连篇！
07-26 3420
【代码】div标签实现输入框，利用contenteditable=“true“属性的标签实现评论。
div的contenteditable属性(及鼠标位置问题)
小阮的笔记本
12-15 3304
contenteditable属性 全局属性 contenteditable 是一个枚举属性，表示元素是否可被用户编辑。 如果可以，浏览器会修改元素的部件以允许编辑。 该属性是一个枚举属性，而非布尔属性。这意味着必须显式设置其值为 true、false 或空字符串中的一个，并且不允许简写为 <label contenteditable>Example Label</label>正确的用法是 <label contenteditable="true">Example L
如何设置DIV可编辑
web前端开发
07-29 6446
如何让一个div变成可编辑状态，比如富文本的输入框就可以用可编辑的div（自定义一个富文本时可用），类似textare。有2种方案可以实现：1是通过contenteditable属性设置为...
div可编辑之contenteditable属性
weixin_34235135的博客
12-11 567
2019独角兽企业重金招聘Python工程师标准>>> ...
contentEditable属性
柑橘乌云_
07-14 514
我们最常用的输入文本内容便是input与textarea，但是有一个属性，可以让我们在很多标签中，如div,table,p,span,body等，可以像input输入框一样，实现文本编辑，这便是contentEdi。该属性的功能是允许用户编辑元素中的内容//所以这个元素必须是可以获得鼠标焦点的元素，并且在点击鼠标后要向用户提供一个插入符号，提示可编辑。contenteditable=“false” #关闭文本编辑，该字段的值缺失时，效果和这个是一样的。
DIV常见任务(下) —变身为编辑器及div的各种diy应用
lijunlinlijunlin的专栏
04-11 741
转载自：http://www.jb51.net/web/72342.html 自从HTML5中新引入了contentEditalbe属性以后，div就与textarea一样，可以作为最常用的编辑器使用。 1.启用div作为编辑器 让div进入编辑状态很简单，只需要： 复制代码 代码如下: div.contentEditable=true; 这样就可以进
div contenteditable自定义组件
https://shixuebin.gitee.io/hexo-blog/
10-12 294
【代码】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、付费专栏及课程。

余额充值