contenteditable / jquery - 获取插入符号的位置并找出它里面的元素答案

【问题标题】：contenteditable / jquery - get carret position and find out what elements its insidecontenteditable / jquery - 获取插入符号的位置并找出它里面的元素
【发布时间】：2011-08-09 12:09:52
【问题描述】：

我已经在论坛上进行了很好的搜索，但找不到具体的答案。

我有一个内容可编辑的 div，我在顶部有 3 个按钮（粗体、斜体、下划线），它们将 execCommand 应用于 div 中突出显示的文本。

我也有一些点击事件来监控在 div 中被点击的内容，以突出显示顶部的相关按钮，效果很好（忽略无效的 xhtml 并遵循理论）：

$("[contenteditable]").delegate("u", "click", function (evt) {
    $("[command='underline']").addClass('on');
});

如果您碰巧单击了 div 中的一些带下划线的文本，则下划线命令按钮的样式为“on”。

我的问题是我现在需要创建一个类似的代码来监视 carret 的位置，它与上面的工作相同，而不是单击，（如果用户使用箭头键在 div 周围移动），这可以使用这段代码来调用：

$("[contenteditable]").bind("keypress",function(e){
      //something about where the caret is and whats around it here
});

但这就是我卡住的地方，我不知道如何获取父标签或任何其他标签，以在顶部突出显示相关按钮。

（我的想法是，如果该问题有解决方案，我可以放弃 deligate click 功能，因为新的 carret position 功能无论如何都可以工作）

真的很感谢人们可以提供的任何帮助，已经努力了 3 天。

======

好头疼啊！！！但是我解决了！！！！！！

$('[contenteditable]').keydown(function() {
    thiselement = window.getSelection().anchorNode.parentNode;
    $(thiselement).trigger('click');
});

这会触发我之前提到的相关标签的正确点击功能！

【问题讨论】：

有几个问题：如果您需要支持 IE window.getSelection()。另一个是anchorNode不保证是文本节点。
它只在 Firefox 中使用，所以这不会是一个问题，但很好发现！你能想出一个不能保证是文本节点的例子吗？
这取决于浏览器，但一个明显的例子是当您有两个相邻的图像并且选择边界在它们之间时。
嗯，我明白了，在我们正在考虑的示例和我们执行的测试中，这不应该是一个问题。不过我一定会注意的，谢谢！

标签： jquery parent contenteditable caret

【解决方案1】：

浏览器有方法告诉您当前选择或插入符号是粗体、斜体还是其他，而不是手动完成所有这些：document.queryCommandState() (MSDN)，对于二进制命令，例如粗体和斜体，和document.queryCommandValue() (MSDN) 用于带有值的命令，例如与字体相关的命令。

这仍然会给您带来检测何时需要更新按钮的问题。如果您的人数相对较少，那么您可以在keyup 或mouseup 事件触发时侥幸逃脱，但这不会捕获所有内容（从编辑或上下文菜单中剪切/复制/粘贴，拖放例如文本）。您可以改为轮询选择和内容，以查看自上次检查以来是否有任何更改，如果有更改，请更新您的按钮。

【讨论】：