div添加contentEditable=true的坑

最新推荐文章于 2025-03-12 17:42:02 发布
最新推荐文章于 2025-03-12 17:42:02 发布
阅读量1.6k 收藏 2
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012000503/article/details/127295596
版权

div添加contentEditable=true;回退键backspace无法删除光标左侧的文字，但是，delete键可以删除光标右侧的文字。c04e13581b9e4c6794523eb9995affa3.jpg

 查了资料（资料的链接：https://www.cnblogs.com/CherishTheYouth/p/CherishTheYouth_1105.html），启发我了。给这个元素添加keydown的事件监听，阻止冒泡就解决了问题。

 

【重要重要】如何在div是contentEditable=true的里面获取光标的位置，并在光标位置处插入内容。焦点位置插入指定内容
肖肖肖丽珠的博客
06-25 1万+
为什么要在contentEditable=true的div里面获取光标呢？因为这篇文章https://blog.csdn.net/qq_33769914/article/details/85002918我们知道想在一个内容里面插入一个新的内容，如果这个新的内容是段html代码。最后显示的是有样式的。那么用input是无法实现的。 所以我们考虑用contentEditable=true的div。...
可编辑div contenteditable = “true“限制字数输入框
熙冰
01-17 8266
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> .main { position: relative; ...
contentEditable=‘true‘后video不能删除
weixin_43825473的博客
01-07 875
contentEditable='true'后video不能删除 在video标签后面加一个<br>标签即可
div设置contenteditable=“true“实现 placeholder效果
最新发布
weixin_45535843的博客
03-12 218
这样就可以实现了，如上图我在disabled的时候也需要展示，所以多加了一条。
通过创建style标签给 contenteditable=“true“ 的可编辑元素增加placeholder(占位符)
weixin_46858893的博客
06-08 635
contenteditable 可编辑元素增加 placeholder(占位符)
给元素设置contenteditable=“true“后,阻止输入回车键
qq_42372534的博客
03-22 2081
设置该元素 display:flex
使用可编辑的div，contenteditable=“true“属性，自动聚焦
weixin_50964329的博客
08-01 2199
如果用普通的input写出来，虽然可以通过方法让input竖向排列，但里面的文字是没办法竖向的，input效果如下，做项目时遇到的需求，需要让文字都竖向排列，且可编辑如下图。代码如下，v-if和动态样式是业务代码，可忽略。实现编辑时也是竖向的效果，最终效果如下。js部分，业务代码不影响。...
js删除html内容的父div,javascript – 当父元素是contentEditable时,是否可以防止删除子元素？...
weixin_26969269的博客
06-05 522
如果你可以使用类,那将很容易.Hello world!Javascript / Jquery Part$(".contentEditable").on("click",function(){// make blank .saveContent$(".saveContent").html("");// copy all contentNotEditable class which inside se...
contenteditable=“true“ 富文本编辑器小插图
qq_40774743的博客
11-25 346
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>contenteditable</title> <style> *{ margin:0; padding:0; }
当div设置contentEditable=true时,重置其内容后无法光标定位
01-18
最近在做一评论功能，需要能够评论表情，那 contentEditable 这个属性就首当其冲了，结果，问题来了… 首先 评论区 长这样：   当输入内容超过限制的时候，清空用户输入超过限制后的内容。   这个好说… 但是清空...
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
12-11
在 vue2 中对表单控件有着良好的双向数据绑定机制，但是对于要特定实现某些功能的输入时，我们就不得不使用到 contenteditable=”true” 的 div ，而在这个 div 上是使用 v-model 是没有效果的。那么问题就来了，...
vue-contenteditable-directive:内容可编辑的视图
04-27
vue-contenteditable-directive Vue的内置v模型与contenteditable div不兼容-该指令已填写。 为什么要使用内容可编辑的div？ 首先-如果可以使用文本区域或带有v-model的输入，请改为执行此操作。 但是，在textarea的实现中有一些怪癖，使contenteditable div非常适合某些应用程序。 可编辑div缩小并随着其中的文本一起增长。 Textarea没有。 格式通常在contenteditable div中更可扩展 用法 import contenteditableDirective from 'vue-contenteditable-directive' //... Vue.use(contenteditableDirective) <template> <div v-contenteditable:messa
前端杂症--div等容器keydown事件无效（包括vue的@keydown）
qq985169322的博客
07-03 7804
问题原因 onKeydown事件触发条件：容器中某个元素获取焦点时，按键。 场景1：应用中监听快捷键 解决方案： // window.onKeydown document.onkeydown 场景2(重点)：窗口中多个应用，监听各自的快捷键 ...
contentEditable属性为true的前端编辑器
notbaldness的博客
03-05 2367
前端常用的输入文本内容便是input与textarea，但是有一些他们有一些局限性，比如input只能输入一行，textarea虽然可以通过设置rows属性来动态调整高度，但是他们都不能存在多种格式的内容，更不能有标签一样样式了。浏览器对于一些dom元素有一个属性contenteditable可以快速将该元素变成可编辑的输入框。
Vue中实现div编辑效果，及contenteditable设置为plaintext-only与true的区别
热门推荐
益添的博客
03-22 1万+
有时候我们希望实现点击一段div内文本时就能直接进行编辑，当然使用文本框、富文本等也可以实现，但终究有些麻烦。 目录 效果预览 参数介绍 封装与使用 使用效果差异 plaintext-only 的效果 使用contenteditable = "true" 的效果 效果预览 今天我给大家介绍的这种方式是直接使用div的 contenteditable属性，即可实现div的文本编辑...
为 contenteditable 元素添加占位符
lio-zero 的博客
10-30 490
假设我们想要为具有给定 contenteditable 属性的元素设置一个占位符： <div contenteditable></div> 注意：contenteditable 用于指定元素内容是否可编辑，它可以应用于任何 HTML 元素，可以像 input 或 <textare> 那样工作编辑它们。 以下两种方法可以为 contenteditable 元素...
div设置参数contenteditable=true
weixin_30892889的博客
10-18 180
div设置参数contenteditable=true后就可以实现和文本框一样的效果，可以输入文字 <div id="id" contenteditable="true"></div> 转载于:https://www.cnblogs.com/zhja/archive/2012/10/18/2729485.html...
【Vue】div标签实现输入框，利用contenteditable=“true“属性的标签实现
强者惜字如金，弱者废话连篇！
07-26 4353
【代码】div标签实现输入框，利用contenteditable=“true“属性的标签实现评论。
可编辑div：contenteditable=true
sslyfnk的博客
12-02 1386
可编辑div：contenteditable=true（让div+css可以相当于Input） 可以使用这个属性自定义富文本编辑器，可以自己设置样式功能等。 这是使用contenteditable=true来制作的一个类似Notion的笔记编辑器 /** 这里以vue举例，这是一个富文本编辑的笔记工具 */ <template> <div class="edit" :type="type" contenteditable="true" :placehol
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

然也斋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值