firefox的标签打开contenteditable属性时能够跨区删除

最新推荐文章于 2023-03-28 17:41:57 发布
最新推荐文章于 2023-03-28 17:41:57 发布
阅读量1.7k 收藏
点赞数
分类专栏： 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qidizi/article/details/8790509
版权

测试发现:

firefox下面,假设有一标签a1在排版位置的前面,a2在排版位置的相对a1的后面,a1/a2同时打开可编辑属性contenteditable时,在a2中进行删除时,一直按住删除键不放,就会也同时把a1编辑区的内容删除掉,在ie中却不会出现这种问题;

看来在firefox中,删除对于可编辑区来说,会有tab的功能作用

且发现在这种状态在,反选的字是使用删除键是无反应的;

分组名列中d/测试二a标签都启用可编辑属性

firefox的标签打开contenteditable属性时能够跨区删除 - qidizi - qidizi 的博客

选中a2

firefox的标签打开contenteditable属性时能够跨区删除 - qidizi - qidizi 的博客


选中a2已删除空

firefox的标签打开contenteditable属性时能够跨区删除 - qidizi - qidizi 的博客

再向前删除,ie保持上图,而firefox却变成下图状态

firefox的标签打开contenteditable属性时能够跨区删除 - qidizi - qidizi 的博客

 



qidizi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html添加删除元素属性,如何使用属性contentEditable删除div内的HTML元素？
weixin_36484814的博客
06-04 2102
因为要删除整个元素，这是更好地使contenteditable="false"，使浏览器不会让一元素的内容被删除。然后你就可以按如下方式使用该属性在事件处理测试：在最新的Chrome版本$('#editable').on('keydown', function (event) {if (window.getSelection && event.which == 8) { // ba...
设置contenteditable属性可编辑HTML标签的内容(可代替textarea)
09-28
例如，当使用Firefox浏览器时，获得焦点的容器可能会出现虚线框，以及在某些情况下光标可能与容器高度一致或不显示。解决这些问题的办法是在容器中预先放置一个占位符，比如 或 ，从而确保光标正常显示。 ...
contentEditable=‘true‘后video不能删除
weixin_43825473的博客
01-07 762
contentEditable='true'后video不能删除 在video标签后面加一个<br>标签即可
html清除选择的值,javascript – 删除contenteditable中选择内的所有HTML标记
weixin_28801659的博客
06-03 517
我这样做的方法是迭代选择内的节点并删除内联节点(可能单独留下< br>元素).这是一个例子,为方便起见使用我的Rangy库.它适用于所有主流浏览器(包括IE 6),但不是很完美：例如,它不会拆分部分选定的格式元素,这意味着部分选择的格式元素被完全删除,而不仅仅是选定的部分.解决这个问题会更棘手.码：var getComputedDisplay = (typeof window.getC...
contenteditable 元素删掉所有内容后再输入内容，v-model变量不能监听内容变化
slashNie的博客
03-28 454
const range = window.getSelection() // 创建range。contenteditable 属性true元素删掉所有内容后再输入内容，v-model变量不能监听内容变化。contenteditable 属性规定元素内容是否可编辑（元素会从其父元素继承该属性。// range 选择obj下所有子内容。dom.focus() // 元素聚焦。// 光标聚焦在文字最后。解决：用v-html绑定元素内容。true： 可以编辑。false： 不可编辑。
HTML5 - contenteditable 富文本编辑器
qq_25833731的博客
05-26 4611
HTML5 - contenteditable应用
格式化的HTML文本转换成SVG文本源代码 利用contenteditable属性，div标签里的文本将可以编辑 借助execC
最新发布
03-08
利用contenteditable属性，div标签里的文本将可以编辑。借助execCommand，div标签的字体样式可以动态调整。源代码中包含了计算HTML文本结构、判断换行等功能，生成跟HTML所见一模一样的SVG文本。 yarn install ...
基于HTML5 contenteditable属性开发的富文本编辑器，PC端版本.zip
02-14
5. **数据保存与恢复**：编辑器需要能够保存用户的输入，并在需要时恢复。这通常通过JavaScript实现，可能涉及JSON序列化和反序列化来存储和加载文本内容。 6. **兼容性处理**：虽然`contenteditable`是HTML5标准的...
angular-contenteditable, "contenteditable" 属性的Angular 模型.zip
09-18
angular-contenteditable, "contenteditable" 属性的Angular 模型 角 contenteditable 一个AngularJS指令，用于将html标记与 contenteditable 属性绑定到模型。安装bower install angular-contenteditable
contenteditable兼容问题
weixin_30299709的博客
12-04 1658
正常情况下用contenteditable,IE下有兼容性问题需要将个别字母变成大写的contentEditable。 获取contenteditable的内容 对html进行处理 兼容 chrome、IE、Firefox var html = $(this).html();if(html){ var lineSign = html.indexOf('<div>'); ...
Linux火狐不能编辑,火狐浏览器下 contenteditable 内包含不可编辑元素，光标不能出现在元素后面...
weixin_34794420的博客
05-14 844
火狐浏览器下.edit {width: 200px;height: 40px;border: 1px solid green;}.disEdit {display: inline-block;width: 50px;height: 24px;}123 问题原因： 不可编辑元素无法获取光标，并且不可编辑元素又在最后。解决办法：如果不可编辑元素在最后，那么在不可编辑元素后面加一个不显示内容的文本节点即...
contenteditable实现输入框踩坑记录
qq_43173415的博客
10-19 4823
最近用到contenteditable实现输入框，遇到了一些坑，其中有一个我找了好久没找到解决方法，换了个思路才解决的： 我的需求是，一个输入框，这个输入框输入@用户，能够根据输入的关键字进行联想搜索，搜索结果显示为一个列表，当点击列表中的某一项时，该项的内容会作为a标签插入进文本框，并且该a标签不可编辑，按Backspace删除时需要将一整个a标签删除。 按照下面代码，外面的div设置了contenteditable="true"就是输入框，然后将a标签设置成contenteditable=“false”
firefox下div的contenteditable
呆子
09-09 509
在firefox下,将DIV 的contenteditable 设为true,这时个按down键,浏览器的滚动条不向下滚动
contentEditable实现div可编辑，控制插入节点（兼容IE）
热门推荐
ccxh505398633的博客
11-12 1万+
实现可文字编辑也可插入节点的功能 展示如下： html5中contentEditable属性规定是否可编辑元素的内容，给需要编辑的节点添加contentEditable=“true”。 兼容性： 当点击Button时在编辑框内增加节点： 一开始div中加的span标签，发现有几个缺陷： 点删除键时span不会删除整个，而是一个一个删除span里的字符串 当有连续的span时，光标会超出容器...
Vue中实现div编辑效果，及contenteditable设置为plaintext-only与true的区别
益添的博客
03-22 1万+
有时候我们希望实现点击一段div内文本时就能直接进行编辑，当然使用文本框、富文本等也可以实现，但终究有些麻烦。 目录 效果预览 参数介绍 封装与使用 使用效果差异 plaintext-only 的效果 使用contenteditable = "true" 的效果 效果预览 今天我给大家介绍的这种方式是直接使用div的 contenteditable属性，即可实现div的文本编辑...
div属性中contenteditable="plaintext-only"的复制粘贴问题
lbn2676043895的博客
01-03 3044
当前项目中使用到了 ，此时无法像input中自由复制粘贴，所以需要使用一段代码放在mounted中执行监听即可 //输入框内复制粘贴功能 document.querySelector('div[contenteditable="plaintext-only"]').addEventListener("paste",function(e){ e.stopPropag...
【干货】富文本编辑器核心操作(contenteditable，window.getSelection()，FileReader与blob图像资源处理)
qq_40670457的博客
05-14 1430
1、内容编辑 contenteditable做前端的基本都知道，让div可写，但问起有那些属性值时，很多人会天真的以为只有“true ”or“ false” contenteditable="" contenteditable="events" contenteditable="caret" contenteditable="plaintext-only" contenteditable="...
contenteditable属性如何使用
06-01
`contenteditable`属性可以让一个元素（比如`div`、`p`、`span`等）变成可编辑的，用户可以在其中输入文字、删除文字等。可以通过以下方式来使用`contenteditable`属性： ```html <div contenteditable="true"> 这...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值