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

最新推荐文章于 2024-07-25 12:17:32 发布
最新推荐文章于 2024-07-25 12:17:32 发布
阅读量2.2k 收藏 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元/天 解锁文章
白马湖小龙王
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Python】高效的Web自动化测试利器—Python+Playwright快速上手自动化实战指南
墩墩分墩
08-16 1105
**Playwright是微软在` 2020 年初 `开源自动化测试工具，功能和 selenium 类似，都可以驱动浏览器进行各种自动化操作。** - 支持主流浏览器，如Chrome、Firefox、Safari 等，同时支持以**无头模式、有头模式**运行，并提供了**同步、异步的 API**，可以结合 `主流测试框架`使用，并且支持浏览器端的自动化脚本录制等功能。 **特点：** - 跨浏览器：Playwright 支持所有现代渲染引擎，包括Chromium、WebKit 和 Firefox； - 跨
【学习】HTML入门
weixin_44372086的博客
02-28 302
HTML入门笔记 HTML概述 HTML 全称Hyper Text Markup Language（超文本标记语言）是Web最基本的构建块。定义了Web内容的含义和结构。“超文本”是指在单个网站内或网站之间将网页相互链接起来的链接。HTML使用“标记”来注释文本、图像和其他内容，以便在Web浏览器中显示。 HTML是由Web的发明者Tim Berners-Lee和同事Daniel W. Connolly于1990年创立的。自1990年，HTML就被用作万维网的信息表示语言，使用HTML描述的文件需要通过we
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 4803
div开启contenteditable属性时，当前div变成了一个可编辑的状态，按下回车键会生成一个div，如何禁止生成： 方案一：让改元素以下只显示文本就不会显示其他标签了 .read-write-plaintext-only { //纯文本 -webkit-user-modify: read-write-plaintext-only; } 方案二：通过jquery的事件，手动生成标签 $('#chat_editor[contenteditable]').keydown(functi
在可编辑 div (contentEditable)末尾插入换行符(\n 或 \＜br\＞)无效的解决办法
最新发布
汤一飞
07-25 333
提前给 div 末尾插入一个 <br> 就行了, 之后看自己情况要不要去掉。给可编辑 div 末尾插入换行符, 发现仍然未换行;
contenteditable可编辑功能,监听输入内容与回车操作
buruyang的博客
04-25 1425
在输入非英文字符时，将光标移动到最后面使用方法用于创建一个新的 Range 对象，Range 对象代表文档中的一段连续的区域sel?sel?第一行代码 let currentDom = document.getElementsByClassName(‘word-block’)[0];用于获取文档中 class 为 ‘word-block’ 的第一个元素，并将其赋值给变量 currentDom。
html，js div开启contenteditable=“true“属性可编辑时，按回车键会出现div，如何禁止生成
唐策的博客
08-30 1212
方案一：让改元素以下只显示文本就不会显示其他标签了 .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实现回车换行，保存回显换行
weixin_46239099的博客
09-25 982
按回车插入换行符
可编辑div:contenteditable之ctrl+enter换行，enter发送
Leo的博客
07-15 8356
项目中遇到需要在输入文字的同时输入表情，web微信用的pre，没搞懂怎么弄，所以用了可编辑div。。 //发送消息可编辑div //回车发消息 $("#textarea").keydown(function($event){ var keycode = window.event ? $event.keyCode : $event.
python模拟输入回车键,如何在contenteditable文本框中模拟“回车”键盘事件
weixin_42389043的博客
03-26 1483
我尝试在python中使用selenium访问一个文本框来执行javascript。我正在成功键入消息，但需要模拟“回车”键盘事件来提交消息。我是HTML和Javascript的绝对初学者，但据我所知，textbox没有输入id，只有一个内容可编辑的文本字段，这可能会导致问题。你知道吗以前，我尝试使用selenium通过其id、xpath和类名并使用send\u键来访问textbox元素。这不起作...
contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作
codingWeb的博客
11-07 8737
这周碰到一个骚东西，contentEditable ，它是用来指定一个元素是否是可编辑的，这也是富文本编辑器实现的底层支持，网上关于这部分东西的资料比较少或者不全，所以我来整理下关于这个属性，和可编辑区域的一些操作吧，比如获取光标位置，设置光标，往可编辑区域光标处插入内容等等 HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素
整理
onepunchmen00的博客
01-08 1993
1.前端安全问题有哪些，如何防范 主要有XSS攻击和CSRF攻击 xss：跨站脚本攻击，在网页里植入一段恶意代码，在该网站的作用域下执行了这段代码 防范： 1.在服务端设置对cookie的保护，也就是设置httponly，防止用户通过document.cookie来读取cookie 2.对用户的输入进行编码和解码，以及转义和过滤用户的输入内容，过滤掉用户输入的dom属性以及style iframe...
把Chrome浏览器变成文本编辑器
weixin_34349320的博客
11-01 101
CoderWall 分享的一个小技巧。 在浏览器地址栏中输入一行代码：data:text/html, <html contenteditable> ，回车即可把浏览器变临时编辑器。 按f12,在<html>处加入属性contenteditable,可动态编辑整个页面。 转载于:https://www.cnblogs.com/lvchenfeng/p/4927...
DIV常见任务(下) —变身为编辑器及div的各种diy应用
lijunlinlijunlin的专栏
04-11 748
转载自：http://www.jb51.net/web/72342.html 自从HTML5中新引入了contentEditalbe属性以后，div就与textarea一样，可以作为最常用的编辑器使用。 1.启用div作为编辑器 让div进入编辑状态很简单，只需要： 复制代码 代码如下: div.contentEditable=true; 这样就可以进
Div + contenteditable【h5】属性制作的编辑框和textarea制作的文本域如何实现换行
苏格拉没有底xx的博客
01-09 3076
什么是contenteditable？ HTML中的contentEditable的属性可以打开某些元素的可编辑状态．也许你没用过contentEditable属性．甚至从未听说过．contentEditable的作用相当神奇．可以让div或整个网页，以及span等等元素设置为可写。我们最常用的输入文本内容便是input与textarea，使用contentEditable属性后，可以在div,t...
div 可编辑时按回车键会出现类似多个div的情况
baidu_24743861的博客
05-17 1381
解决办法：给div添加如下CSS .read-write-plaintext-only { //纯文本 -webkit-user-modify: read-write-plaintext-only; }
div,contenteditable编辑器之ctrl+enter换行，enter发送
weixin_34326429的博客
02-21 931
　　　　//回车发消息 $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 728
在chrome黏贴进富文本的内容会自动生成span包裹， 如图 如果想直接生成文本节点可以 在节点上监听paste事情并重置浏览器行为 dom.addEventListener('paste', function (event) { const text = event.clipboardData.getData('Text'); document.execCommand("insertText", false, text); event.preventDef.
<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
这段代码是一个HTML表格中的一行数据（<tr>表示table row，即表格中的一行）。其中每个单元格（<td>）都设置了contenteditable属性为true，表示该单元格内容可编辑。这个表格可能用于记录某个工艺过程中的不良情况，每个单元格表示不同的信息，例如： - 工艺膜层 - AOI Step - 不良类型 - Layer（Code） - Type - Dept - Subcode - Code描述 - Image1 - Image2 - Image3 - Image4 - Image5 - Image6 - 判定细则 这些信息可能是用于记录某个工艺过程中的不良情况，每个单元格表示不同的信息。其中，Image1到Image6可能是用于记录不良情况的照片或者截图，而判定细则可能是用于记录不良情况的判定标准。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值