如何防止IE10中contenteditable ul被误删除?

2024-03-18

我想在页面上有一个内容可编辑的 ul。但是,在 Internet Explorer 10 中,如果您单击进入,使用右键单击菜单或 CTRL+A 选择全部,然后删除,ul 元素将从页面中删除。

防止这种情况的最佳方法是什么,或者至少检测它何时发生并插入替换 ul?


我建议拦截删除和退格键并手动执行删除。步骤是:

  • 获取选定的范围
  • 调整范围的末端以使其位于可编辑范围内<ul>元素(如果它们在外面)
  • Call deleteContents()在范围内。

请注意,以下内容不适用于 IE Rangy库,它也可以用来简化deleteSelectedContent()轻微地。

Demo: http://jsfiddle.net/timdown/STcXa/3/ http://jsfiddle.net/timdown/STcXa/3/

Code:

var editor = document.getElementById("editor");

function deleteSelectedContent() {
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0);
            var editorRange = range.cloneRange();
            editorRange.selectNodeContents(editor);

            // Adjust selection range boundaries
            if (range.compareBoundaryPoints(Range.START_TO_START, editorRange) == -1) {
                range.setStart(editorRange.startContainer, editorRange.startOffset);
            }
            if (range.compareBoundaryPoints(Range.END_TO_END, editorRange) == 1) {
                range.setEnd(editorRange.endContainer, editorRange.endOffset);
            }

            range.deleteContents();
        }
    }
}

editor.addEventListener("keydown", function(evt) {
    if (window.getSelection &&
            !window.getSelection().isCollapsed &&
            (evt.keyCode == 8 || evt.keyCode == 46)) {
        evt.preventDefault();
        deleteSelectedContent();
    }
}, false);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何防止IE10中contenteditable ul被误删除? 的相关文章

  • 无法提取 Typescript 中的对象值

    我一直在尝试将 JavaScript Web 表单转换为 Typescript 但无法弄清楚如何处理以下内容 在 JavaScript 中有效 let fieldValues JSON parse cookieData let keys O
  • jquery 事件委托

    我正在尝试使用事件委托重写一段代码 希望它能停止与另一个 js 代码段发生冲突 但我已经破解了密码 原来的 to scale up on hover var current h null var current w null piccon
  • Facebook 登录无法在移动浏览器中使用

    我使用 react facebook login 在我的网站中实现了 facebook 登录module https github com keppelen react facebook login 我在 ComponentDidMount
  • 标记内的值发生变化时调用函数

    JavaScript 有没有什么方法可以在段落标记的值更改时调用函数 概述 HTML p 00 00 p
  • jQuery Masonry 和 CSS3

    如何在保持砖石布局的同时将 CSS3 过渡与当前图像结合起来 这是我的html div img class bottom src images div
  • 如何使用 JavaScript 播放任意 MIDI 音符?

    澄清一下 我不想生成 MIDI 文件 也不想播放 MIDI 文件 我希望即时播放 MIDI 音符 我尝试使用https github com mudcube MIDI js https github com mudcube MIDI js作
  • Webpack:如何将 javascript 注入 HTML 而不是单独的 JS 文件

    有没有办法让 webpack 将输出注入 HTML 而不是单独的文件 我不得不使用html webpack inline source plugin https github com DustinJackson html webpack i
  • 如何在 Next.js 中正确使用 Mongoose 模型?

    我正在使用 TypeScript 和 MongoDB Mongoose 构建 Next js 应用程序 我在使用 Mongoose 模型时开始遇到错误 这导致它们在每次使用模型时都尝试覆盖模型 导致模型覆盖错误的代码 import mong
  • D3 时间解析返回 null

    根据此页面上的说明 https github com mbostock d3 wiki Time Formatting https github com mbostock d3 wiki Time Formatting我正在尝试解析 ISO
  • 调用不带括号的 javascript 函数

    以下 renderChat 函数用于将消息和图像渲染到聊天板上 该函数内部还有另一个函数 var onComplete function 它完成创建列表元素并将其附加到聊天列表的所有工作 onComplete函数之后就只有这三行代码 img
  • JavaScript 按名称获取当前作用域中的变量

    所以我有一个变量和该变量名称的字符串 function Factory string var foo bar console log foo is equal to this string 如果变量所在的对象是当前对象 如何从字符串文字中获
  • 使用 htaccess 重写规则重定向后 CSS 未加载

    我有以下用户个人资料网址的简写 RewriteRule w profile php name of user 1 当我这样做时 该网站使用适当的 css 文件进行样式设置site com name of user 但当我这样做的时候却不是s
  • jQuery 单击附加元素不起作用

    我有一个数组 我正在从 Array 获取数据并在 jQuery Append to list 中使用它 但是当我单击列表项时 它只显示最后一个元素 var array 1 2 7 3 4 8 5 6 9 for var i 0 i lt a
  • 限制线的长度

    我正在尝试画一条代表 弹弓 的线 并且希望它具有最大拉伸长度 在 p5 中 我在位置和位置之间画了一条线 line posA x posA y posB x posB y posA 是鼠标 x 和 y posB 是画布上圆的位置 我想要做的
  • Antd select 元素:如何禁用输入?

    我正在尝试使用模式 multiple 的选择元素 我希望禁用输入 这意味着用户只能在现有选项之间进行选择 而不能输入文本 我该怎么做呢 我的元素 import Select from antd import antd dist antd c
  • 用于生成多色文本的 jQuery 插件,该文本可在悬停时改变颜色

    我想为各种链接生成多色文本 并从预先指定的颜色数组中为各个字母随机分配颜色 当将鼠标悬停在带有文本的 div 上时 颜色会发生变化 我正在考虑一个 jQuery 插件 脚本将是可行的方法 我想知道是否存在这样的插件或近似插件 Thanks
  • 数据表导出按钮问题 - 按钮不显示

    我试图在屏幕中央和数据表下方显示一个导出按钮 该按钮根本不显示 我已经下载了数据表文件 它们托管在我的服务器上 因此是本地引用
  • 在 Map() 的条目上使用 Promise.all

    我正在使用 Map 来表示一些键 值对 let myMap new Map myMap set foo bar myMap set foo2 bar42 对于每个 Map 条目 我执行一个返回 Promise 的函数 所有这些 Promis
  • 具有相等宽度和高度 TD 的响应式表格

    如何创建每个单元格 TD 具有相同宽度和高度的响应式 HTML 表格 因此 当我调整浏览器窗口的大小或调整表格容器的大小时 表格将调整大小 但每个单元格将具有相同的高度和宽度 基金会不关心这个 当我用固定宽度和高度 以像素为单位 初始化 T
  • 调试客户端时使用 Chrome/Firefox

    我正在使用带有 getUserMedia 的相机 但出现了一些需要修复的错误 问题是 Visual Studio 只允许我使用 IE 调试 JavaScript 我的意思是命中断点 而 IE 不支持 getUserMedia 如果您想在 I

随机推荐

  • MemoryStream 返回时禁用读取

    在我的程序中 我基本上是读取一个文件 对其进行一些处理 然后将其作为内存流传递回主程序 该内存流将由流读取器处理 这一切都将由我的 main 旁边的一个类来处理 问题是 当我从另一个类中的方法返回内存流时 canread 变量设置为 fal
  • 快速读取交错数据的方法?

    我有一个包含多个数据通道的文件 该文件以基本速率采样 每个通道都以该基本速率除以某个数字进行采样 它似乎总是 2 的幂 尽管我认为这并不重要 所以 如果我有渠道a b and c 在 1 2 和 4 的分隔符处采样 我的流将如下所示 a0
  • 如何使用主题中本地存储的字体覆盖默认字体?

    我正在使用 Quarto 构建一个网站 并尝试覆盖主题中的默认字体 我的总体目标是使用本地谷歌字体而不是使用谷歌API my quarto yml看起来像这样 project type website format html theme l
  • MongoDB shell中无序批量更新记录

    我有一个包含数百万个文档的集合 类似于以下内容 id ObjectId value 0 53 combo h 0 v 0 42 h 1 v 1 32 问题是这些值存储为字符串 我需要将它们转换为浮点 双精度 我正在尝试这个并且它正在工作 但
  • 在函数中使用非静态值作为默认参数

    有没有一种好的方法可以将非静态值作为函数中的默认参数 我见过一些对同一问题的较旧的回答 这些回答总是以明确地写出超载而告终 这在 C 17 中还有必要吗 我想做的是做类似的事情 class C const int N Initialized
  • 请推荐一个可处理可拖动元素碰撞检测的 JQuery 插件 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我们正在使用可拖动 http jqueryui com demos draggable JQuery UI 插件 需要禁止元素之间重叠 我
  • 最终方法是否会阻止 Hibernate 为此类实体创建代理?

    Hibernate 使用代理来实现集合的延迟加载 甚至单端关联 根据Hibernate的 3 6 5 参考文档 部分 21 1 3 单端关联代理 如果这样的代理包含 任何最终方法 我的问题是 此限制仅适用于持久字段的 getter sett
  • 如何使用 Jackson (2.x) 提供程序设置 Jersey 客户端来处理 POST 请求

    我正在努力设置 Jersey 客户端来测试对资源的 POST 请求 我的 Jersey 和 Jackson 依赖项如下所示
  • 更改传单标记图标

    我正在使用 Dennis Wilhelm 的 Leaflet Slider 在 Leaflet 地图上显示数据的变化 我正在尝试更改标记图标 但效果不佳 那么 当使用Leaflet Slider显示随时间的变化时 如何更改标记图标呢 我必须
  • 在 Excel 中计算静态随机数(计算一次)

    我正在寻找一种在 Excel 中计算一次随机数的方法 所以它是在第一次调用时计算的 但之后它就不会改变 举例来说 如果我在 B1 有这样的东西RANDONCE A1 然后我第一次在 A1 中输入一个值时 它会计算一个随机值 但随后它不会再次
  • 如何在TPM中加载和使用持久对称密钥?

    我只是想将一个 32 字节长的对称密钥持久存储在 TPM 的 NV 存储中 并在重新启动后使用它 无需将其从 TPM 中取出 来加密小型数据 我尝试用两种不同的方式做到这一点 1 使用 TPM 的随机字节生成器创建密钥 在NV中定义空间并将
  • Ruby 电子邮件编码和引用的可打印内容

    有没有一种直接的方法来指导 TMail 将正文编码为 quoted printable 我只看到其中用于解码此类内容的方法 而不是创建它 你刚刚使用吗TMail 或者你正在使用它ActionMailer 看起来像TMail本身不具备编码为q
  • Java从其他目录导入

    我正在使用 Java 构建企业服务总线 ESB 我不会进入 细节但我必须构建多个使用相同类的服务器 我有以下目录结构 server1 Main java server2 Main java com Database java 我想从Main
  • ngx-bootstrap - 用于输入的时间选择器弹出窗口

    我正在使用time picker组件来自ngx引导程序 https valor software com ngx bootstrap timepicker我想包括time picker如下输入框 更多以弹出对话框的方式 用于日期选择器 ht
  • OrderedDictionary、ListDictionary 和 HybridDictionary 需要什么?

    当三种不同的字典 OrderedDictionary ListDictionary 和 HybridDictionary 都执行相似的功能时 它们的需求是什么 它们都没有排序 并且可以通过所有集合中的键来检索集合的元素 那么 三个不同类的目
  • bootstrap css,如何在容器内制作全宽div

    我想用引导框架制作这种布局 menu x full width site content
  • 单元测试中的元素在完成后仍待处理

    运行测试后 我在 Resharper 中看到此警告 所有测试都通过了 2018 08 09 11 11 58 524 WARN 元素 Data Tests Infra IntegrationTests ResolvedIdentityTes
  • 如何对 CollapsingToolbarLayout 的展开标题进行多行排列?

    我的问题是下一个 我会使用相对较大的文本作为 CollapsingToolbarLayout 标题 因此我需要将其显示为多行模式 当我尝试通过更改文本外观时setExpandedTitleTextAppearance 方法行不通 我使用的代
  • Android Volley ImageLoader - BitmapLruCache 参数?

    我在使用新的 Volley 库实现图像缓存时遇到问题 在演示中 代码如下所示 mRequestQueue Volley newRequestQueue context mImageLoader new ImageLoader mReques
  • 如何防止IE10中contenteditable ul被误删除?

    我想在页面上有一个内容可编辑的 ul 但是 在 Internet Explorer 10 中 如果您单击进入 使用右键单击菜单或 CTRL A 选择全部 然后删除 ul 元素将从页面中删除 防止这种情况的最佳方法是什么 或者至少检测它何时发