div contenteditable="true"时怎么获取div的内容

最新推荐文章于 2025-06-16 11:56:32 发布
最新推荐文章于 2025-06-16 11:56:32 发布
阅读量7.7k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript python java ViewUI
原文链接：https://my.oschina.net/u/3680343/blog/1604307

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

 

在项目实战经验中，我选择的是html()，它获取的值包含html标签，也就保留了换行，段落等的样式，你以什么样式传到后台的数据，再展示的时候还保留着原来的样式，这对回显编辑很有作用

如果你也想让内容的样式保存到后台，就要把样式写在html标签里，写的css样式可是不起作用的

如果，你不想带有样式一起保存在后台，建议使用text(),它获取的只是纯文本，不含有html标签

091611_EIxs_3680343.png091616_doKV_3680343.png

 

 

转载于:https://my.oschina.net/u/3680343/blog/1604307

【重要重要】如何在div是contentEditable=true的里面获取光标的位置，并在光标位置处插入内容。焦点位置插入指定内容
肖肖肖丽珠的博客
06-25 1万+
为什么要在contentEditable=true的div里面获取光标呢？因为这篇文章https://blog.youkuaiyun.com/qq_33769914/article/details/85002918我们知道想在一个内容里面插入一个新的内容，如果这个新的内容是段html代码。最后显示的是有样式的。那么用input是无法实现的。 所以我们考虑用contentEditable=true的div。...
光标的定位与获取
03-20
光 标 的 定 位与 获 取
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
12-11
发现问题 在 vue2 中对表单控件有着良好的双向数据绑定机制，但是对于要特定实现某些功能的输入时，我们就不得不使用到 contenteditable=”true” 的 div ，而在这个 div 上是使用 v-model 是没有效果的。那么问题就来了，输入是非常需要双向绑定的，这里的双向数据绑定该如何实现？ 解决思路一：自定义指令 当然，说在这一段的前面，这种解决方式在 vue2 中是不行的，为什么这么说，因为现在去搜索这个问题绝大多数的搜索结果是这个，所以放在前面。 实现的原理以及为什么不能用了 原理：自定义一个双向数据绑定的指令，代码如下： Vue.directive('demo',
Vue中动态获取设置了contenteditable属性的div的输入数据
☆往事随風☆的博客
10-14 4248
contenteditable 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑。true 或空字符串，表示元素是可编辑的。false 表示元素不是可编辑的。如果没有设置该属性的值（例如），则其值被视为空字符串。如果没给出该属性或设置了无效的属性值，则其默认值继承自父元素：即，如果父元素可编辑，该子元素也可编辑。注意，虽然该属性允许设定的值包括 true 和 false，但该属性仍是一个枚举 属性而非布尔属性。
如何用div手写一个富文本编辑器（contenteditable=“true“）
最新发布
sha虫剂的博客
06-16 867
摘要：本文介绍了如何利用div的contenteditable属性实现简易富文本编辑器。通过设置contenteditable="true"使div可编辑，并分为工具栏、编辑区和底部表情区三部分。关键实现包括：1)使用getSelection保存光标位置；2)insertHtml方法插入自定义HTML节点；3)通过正则处理HTML转纯文本。该方法比textarea更灵活，比完整富文本编辑器更轻量，适合需要插入定制内容（如昵称标签、链接等）的场景。文中提供了核心代码片段，包括HTML结构、
【Vue】div标签实现输入框，利用contenteditable=“true“属性的标签实现
强者惜字如金，弱者废话连篇！
07-26 4537
【代码】div标签实现输入框，利用contenteditable=“true“属性的标签实现评论。
使用 contenteditable=“true“ 实现的文本框全选内容
卡尔特斯
11-22 2111
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.
当div设置contentEditable=true时,重置其内容后无法光标定位
01-18
最近在做一评论功能，需要能够评论表情，那 contentEditable 这个属性就首当其冲了，结果，问题来了… 首先 评论区 长这样：   当输入内容超过限制的时候，清空用户输入超过限制后的内容。   这个好说… 但是清空...
Vue中div contenteditable 的光标定位方法
11-30
在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框 在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后 function keepLastIndex(obj) { console.log(obj) console....
Contenteditable=“true“属性让HTML标签中的内容（如Div）可编辑（相当于Input、Textarea）
qhdzj87的专栏
01-18 2915
在HTML5中，我们可以给HTML标签设置contenteditable="true"属性实现用户在浏览器端对标签中的内容进行编辑。 例如： <div contenteditable="true">可以编辑里面的内容</div> Contenteditable属性兼容所有浏览器（IE6之前的版本是否兼容未测试），在有些时候我们完全可以用div去替代input或者textarea来实现数据的收集。例如，在使用ajax的时候，在提交表单时我们可以获取div的内容。...
js如何获取div中的数据
小冰的博客
01-02 6675
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>如何获取div中的文字</title> <script> function check() { var text2 = document.getElementById('text2'); var res = text2.innerHTML; alert(res);
获取选定区域的html
sgzwiz的专栏
08-22 1744
用range的innerHTML取得的html中tag属性不全，要想取得tag的完整属性，参照下面代码 Paste herefunction handlepaste (elem, e) { var savedcontent = elem.innerHTML; if (e && e.clipboardData && e.clipboardData.getData) {// Webk
html，js div开启contenteditable=“true“属性可编辑时，按回车键会出现div，如何禁止生成
唐策的博客
08-30 1376
方案一：让改元素以下只显示文本就不会显示其他标签了 .read-write-plaintext-only { //纯文本 -webkit-user-modify: read-write-plaintext-only; } 方案二：通过jquery的事件，手动生成标签 $('#chat_editor[contenteditable]').keydown(function(e) { if (e.keyCode === 13) { document.execCommand('in
flex DataGrid编辑单元格并获取新的值
xuhuanchao的专栏
12-03 3031
<mx:DataGrid id="dg" x="19" y="58" dataProvider="{arr}" editable="true" itemEditEnd="editHandle(event)" horizontalGridLines="true" horizontalGridLineColor="#B9F2C9" verticalGridLineCol
vue中当使用div标签的contenteditable的时候,动态获取输入内容的方法
qq_39687662的博客
08-21 6483
当使用div标签进行编辑的时候,如果想要动态获取输入的值,也就是div盒子中的内容,用v-model会报错,不支持 解决方案(用ref和this.$refs以及js的innerHTML来获取) 同时要记得用v-on监听一个input事件 用给标签加上ref属性之后,再到监听input事件的方法里去用this.$refs.自定义的ref名字,即可获取到这个标签对象,然后再用innerHTML即可获取到里面的值 ...
使用 contenteditable 属性实现网页内容可编辑化
wscfan的博客
03-26 1109
contenteditable 是 HTML 中的一个全局属性，允许用户直接在浏览器中编辑元素的内容。这一特性常用于富文本编辑器、实时协作工具或快速内容调整场景。本教程将详细介绍 contenteditable 的基本用法、进阶技巧及注意事项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值