chrome可输入div contenteditable 回车自动生成div替换为＜br/＞

最新推荐文章于 2024-07-25 12:17:32 发布
最新推荐文章于 2024-07-25 12:17:32 发布
阅读量2.3k 收藏 4
点赞数
文章标签： chrome html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39168678/article/details/120773776
版权
本文介绍了在Chrome浏览器中，使用contenteditable属性创建可编辑区域时遇到的问题。当用户按下回车键，Chrome会默认生成span标签。为了解决这个问题，可以监听回车事件并重置浏览器行为，通过添加不可见空格确保光标位于下一行。另一种方法是将div的display属性设为inline-block，以避免生成额外的span。
摘要由CSDN通过智能技术生成

在这里插入图片描述

在chrome黏贴进富文本的内容会自动生成span包裹，

如图
在这里插入图片描述

监听回车事情并重置浏览器行为

    dom.addEventListener('keypress', (e) => {
   
      if (e.code =&#
最低0.47元/天 解锁文章
白马湖小龙王
关注
【Python】高效的Web自动化测试利器—Python+Playwright快速上手自动化实战指南
墩墩分墩
08-16 2053
**Playwright是微软在` 2020 年初 `开源自动化测试工具，功能和 selenium 类似，都可以驱动浏览器进行各种自动化操作。** - 支持主流浏览器，如Chrome、Firefox、Safari 等，同时支持以**无头模式、有头模式**运行，并提供了**同步、异步的 API**，可以结合 `主流测试框架`使用，并且支持浏览器端的自动化脚本录制等功能。 **特点：** - 跨浏览器：Playwright 支持所有现代渲染引擎，包括Chromium、WebKit 和 Firefox； - 跨
wangEditor 修改 “视频”菜单，上传视频（替换原来的输入地址），三次修改
one_hwx的博客
02-18 6329
参考文章：https://blog.csdn.net/m0_37885651/article/details/83660206 发现图标失效、做了些修改 效果图： 上传返回数据（单个视频上传）： data:视频路径 errno:看wangEditor文档 /** * 上传案例内容视频 * @param request * @return ...
可编辑div实现回车换行，保存回显换行
weixin_46239099的博客
09-25 1132
按回车插入换行符
Div + contenteditable【h5】属性制作的编辑框和textarea制作的文本域如何实现换行
苏格拉没有底xx的博客
01-09 3115
什么是contenteditable？ HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素设置为可写。我们最常用的输入文本内容便是input与textarea，使用contentEditable属性后，可以在div,t...
contenteditable换行踩坑心得
热门推荐
zjjlcq的博客
04-12 1万+
        做后台编辑器，可伸缩下性的输入框，在H5出了contenteditable之后，基本取代了使用textarea自适应高度的方式。        然而，这个属性，除去兼容性不说，还是存在一些比较坑爹的小bug的。搜了不少文章，比如张鑫旭大神的纯文本方式输出div内容，链接狂戳以下，帮助还是很大的：http://www.zhangxinxu.com/wordpress/2016/01/...
html，js div开启contenteditable属性可编辑时，按回车键会出现div，如何禁止生成
PrimaryColor
03-12 4905
div开启contenteditable属性时，当前div变成了一个可编辑的状态，按下回车键会生成一个div，如何禁止生成： 方案一：让改元素以下只显示文本就不会显示其他标签了 .read-write-plaintext-only { //纯文本 -webkit-user-modify: read-write-plaintext-only; } 方案二：通过jquery的事件，手动生成标签 $('#chat_editor[contenteditable]').keydown(functi
把Chrome浏览器变成文本编辑器
weixin_34349320的博客
11-01 114
CoderWall 分享的一个小技巧。 在浏览器地址栏中输入一行代码：data:text/html, <html contenteditable> ，回车即可把浏览器变临时编辑器。 按f12,在<html>处加入属性contenteditable,可动态编辑整个页面。 转载于:https://www.cnblogs.com/lvchenfeng/p/4927...
可编辑div:contenteditable之ctrl+enter换行，enter发送
Leo的博客
07-15 8433
项目中遇到需要在输入文字的同时输入表情，web微信用的pre，没搞懂怎么弄，所以用了可编辑div。。 //发送消息可编辑div //回车发消息 $("#textarea").keydown(function($event){ var keycode = window.event ? $event.keyCode : $event.
contenteditable可编辑功能,监听输入内容与回车操作
buruyang的博客
04-25 2053
在输入非英文字符时，将光标移动到最后面使用方法用于创建一个新的 Range 对象，Range 对象代表文档中的一段连续的区域sel?sel?第一行代码 let currentDom = document.getElementsByClassName(‘word-block’)[0];用于获取文档中 class 为 ‘word-block’ 的第一个元素，并将其赋值给变量 currentDom。
contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作
codingWeb的博客
11-07 8879
这周碰到一个骚东西，contentEditable ，它是用来指定一个元素是否是可编辑的，这也是富文本编辑器实现的底层支持，网上关于这部分东西的资料比较少或者不全，所以我来整理下关于这个属性，和可编辑区域的一些操作吧，比如获取光标位置，设置光标，往可编辑区域光标处插入内容等等 HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素
wangEditor上传本地视频
guanguan0_0的博客
12-05 1万+
wangEditor是一个轻量级web富文本编辑器，一般可以满足用户需求，但是有特殊要求的可以对其进行修改 源文件是上传Html视频格式，如果想要变成上传本地视频需要做以下修改： /* 上传视频 */ // 构造函数 function UploadVideo(editor) { this.editor = editor; } // 原型 UploadVideo.prototy...
div 可编辑时按回车键会出现类似多个div的情况
baidu_24743861的博客
05-17 1404
解决办法：给div添加如下CSS .read-write-plaintext-only { //纯文本 -webkit-user-modify: read-write-plaintext-only; }
在可编辑 div (contentEditable)末尾插入换行符(\n 或 \＜br\＞)无效的解决办法
最新发布
汤一飞
07-25 488
提前给 div 末尾插入一个 <br> 就行了, 之后看自己情况要不要去掉。给可编辑 div 末尾插入换行符, 发现仍然未换行;
html，js div开启contenteditable=“true“属性可编辑时，按回车键会出现div，如何禁止生成
唐策的博客
08-30 1248
方案一：让改元素以下只显示文本就不会显示其他标签了 .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
div,contenteditable编辑器之ctrl+enter换行，enter发送
weixin_34326429的博客
02-21 944
　　　　//回车发消息 $scope.keyDownSend = function ($event) { var keycode = window.event?$event.keyCode:$event.which; var evt = $event || window.event; var inputTx...
chrome可输入div contenteditable 黏贴自动生成span解决
weixin_39168678的博客
10-14 770
在chrome黏贴进富文本的内容会自动生成span包裹， 如图 如果想直接生成文本节点可以 在节点上监听paste事情并重置浏览器行为 dom.addEventListener('paste', function (event) { const text = event.clipboardData.getData('Text'); document.execCommand("insertText", false, text); event.preventDef.
关于可编辑DIV的操作，包括自动换行等
m0_60312879的博客
06-08 656
word-break:break-all ------这两个样式属性加在一起，输入文本时就可以自动换行。1.刚开始尝试给textarea 赋值 :，发现html的font标签并没有转换为红色的样式输出，还是保留了标签的字符串形式。2.后来我查了一下，发现textarea是纯文本的标签，赋值什么样的字符串都会原样输出，并不会对html标签进行转换。contenteditable="true" ------这个属性为true代表可编辑。3.这时查到可编辑的DIV标签是最好的选择。
python模拟输入回车键,如何在contenteditable文本框中模拟“回车”键盘事件
weixin_42389043的博客
03-26 1503
我尝试在python中使用selenium访问一个文本框来执行javascript。我正在成功键入消息，但需要模拟“回车”键盘事件来提交消息。我是HTML和Javascript的绝对初学者，但据我所知，textbox没有输入id，只有一个内容可编辑的文本字段，这可能会导致问题。你知道吗以前，我尝试使用selenium通过其id、xpath和类名并使用send\u键来访问textbox元素。这不起作...
contenteditable="true"下设置Ctrl+Enter换行
AUTUMN
10-23 3351
  &lt;div contenteditable="true" id="liaotiancen" class="contact-send-textarea"&gt;&lt;/div&gt; document.onkeydown=function(e){ if(e.keyCode == 13 &amp;&amp; e.ctrlKey){ // 这里实现换行 if (br..
<tr> <td contenteditable="true">工艺膜层</td> <td contenteditable="true">AOI Step</td> <td contenteditable="true">不良类型</td> <td contenteditable="true">Layer（Code）</td> <td contenteditable="true">Type</td> <td contenteditable="true">Dept</td> <td contenteditable="true">Subcode</td> <td contenteditable="true">Code描述</td> <td contenteditable="true">Image1</td> <td contenteditable="true">Image2</td> <td contenteditable="true">Image3</td> <td contenteditable="true">Image4</td> <td contenteditable="true">Image5</td> <td contenteditable="true">Image6</td> <td contenteditable="true">判定细则</td> </tr>
06-12
其中每个单元格（<td>）都设置了contenteditable属性为true，表示该单元格内容可编辑。这个表格可能用于记录某个工艺过程中的不良情况，每个单元格表示不同的信息，例如： - 工艺膜层 - AOI Step - 不良类型 - ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值