相关疑难解决方法(0)

脚本

我有一个令人满意的<div>区域,在这个区域内我可能有一些<span contenteditable="false"></span>包含一些文字.我们的想法是,这些span元素将表示无法编辑的样式文本,但可以<div contenteditable="true"></div>通过按退格键从区域中删除.

问题

将光标放置在这里的大问题.如果你删除其中一个<span>元素,光标会跳到结尾<div>.更有趣的是,如果你在光标"结束时"输入一些文字,那么文本放置就好了...然后,如果删除新输入的文本,光标会跳回来!

我准备了一个小提琴来证明这一点.我需要这个只能在Chrome中使用,而其他浏览器现在要么不关心,要么有适当的解决方法.(另请注意,准备好的小提琴只是为了在Chrome中展示这一点).

小提琴

小提琴说明: Chrome版本39.0.2171.95米(64位)也以32位再现

1. 点击进入<div>区域
2. 输入"123"
3. 退格键"3"退格键"2"退格键"1"

相关细节

对此进行了广泛的研究,我遇到了类似的各种SO问题,但借用相关解决方案并未证明是我所追求的银弹.我还发现Chrome项目的问题似乎针对上述问题(可能不是以确切的方式),可以在下面查看.

1. 问题384357:在具有不可编辑节点的可信区域内的插入位置
2. 问题385003:当到达contenteditable元素中的行尾时插入插入符样式是错误的
3. 问题71598:在contentEditable结尾处的不可编辑元素之后处于错误位置的插入符号

我发现的最接近的SO解决方案可以在这里.这个解决方案的想法是‌在<span>元素之后放置字符,但如果我现在要删除我<span>,我会删除‌...强制我的光标跳到最后,提供一个奇怪的UI体验,不删除我的<span>"我的"初始删除键击."

题

有没有人遇到过这个问题并找到了解决方法？我欢迎任何可能的解决方案,即使JS他们来的时候也很讨厌.我已经开始了解到杠杆作用contenteditable还有一个挣扎的清单,但这似乎是我目前最后的困难.

这个问题（我添加了赏金）是相关的，并给出了背景和动机（我在 github 上的 GPLv3 MELT 监视器；我最后添加了一些自述文件）。

我只对最新的HTML5 兼容浏览器（在 GNU/Linux 上）感兴趣，例如 Firefox 38 至少（最好是 42）或 Chrome 46（在 Debian/Sid 桌面上，x86-64）

所以，假设我的 HTML5 页面中有

<div id='myeditdiv' contenteditable='true'>
  <span class='foo_cl'>FOO<span class='bar_cl'>bar</span></span>
</div>

^{（实际上 HTML 已生成，DOM 也已生成；我当前正在服务器端生成一些构造 DOM 的 javascript；当然我可以更改生成器！）}

我单击以使焦点位于两者之间OO。我如何获取 的 DOM 元素foo_cl，最好使用 Jquery。

当聚焦在 之间时同样的问题ar。我想要bar_cl跨度。

当然，$(':focus')不干活。它给出了div

FWIW，它是MELT 监视器的提交9109ae5b3d168f1 。

附言。请参阅我（2015 年 11 月 26 日^）对此问题的附录。可能contenteditable对我没用，但tabindex肯定有用！

所以，我有两个 contenteditable div 嵌套在另一个里面：

<div class="top" contenteditable="true">
     <div class="nested" contenteditable="true">This</div>
</div>

这是小提琴。

当它聚焦时，nested应该聚焦但使用console.log(document.activeElement);它表明top聚焦并且它不识别nesteddiv。

在编辑内容的情况下，我需要识别nesteddiv 元素而不是top元素。

我将如何实现这一目标？任何帮助都感激不尽。

http://jsfiddle.net/VzbYJ/86/

请看一下这个链接.因为它清除了它将在插入符号位置插入一个span节点.问题是,插入节点后,如果我按任何字符,其颜色也是绿色.因为它也是在span元素内部.那么如何在插入后放置插入符号以使下一个插入节点的颜色保持正常.

我试图找到所选节点(基于插入位置),在元素后面设置范围并使用折叠(false).但我无法获得所需的输出.

用于查找节点的代码:

  function findNode(event)
  {
    if (event.type == 'click')
    par = event.target;

    else if (event.type == 'keyup'){        
        if (document.selection)
        par = document.selection.createRange().parentElement();
    else if (window.getSelection){
        var range = window.getSelection().getRangeAt(0);
        par = range.commonAncestorContainer.parentNode;
    }
  }

然后我使用setEndAfter()ant collapse(false)设置边界.我是这个领域的新手,所以我不确定我是对的.所以任何建议都非常值得注意.提前致谢.