如何使用Javascript在浏览器的可编辑内容窗口中找到游标的DOM节点？ [英] How do I find out the DOM node at cursor in a browser's editable content window using Javascript?

问题描述

解决方案

通过可编辑的内容窗口 我要假设你的意思是开启 contenteditable 或 designMode 已打开的文档的元素。 / p>

还有两种情况需要考虑：用户进行选择的情况以及只有插入符号的情况。下面的代码在这两种情况下都可以工作，并且将给你完全包含选择的最内层的元素。如果选择完全包含在文本节点中，那么在IE中获得该文本节点（在其他浏览器中是微不足道的）稍微复杂一些，所以我没有在这里提供该代码。如果你需要它，我可以挖出来。

  function getSelectionContainerElement（）{
 var range，sel，container ; 
 if（document.selection&& document.selection.createRange）{
 // IE case 
 range = document.selection.createRange（）; 
 return range.parentElement（）; 
} else if（window.getSelection）{
 sel = window.getSelection（）; 
 if（sel.getRangeAt）{
 if（sel.rangeCount> 0）{
 range = sel.getRangeAt（0）; 
} 
} else {
 //旧的WebKit选择对象没有getRangeAt，所以
 //从其他选择属性创建一个范围
 range = document.createRange ）; 
 range.setStart（sel.anchorNode，sel.anchorOffset）; 
 range.setEnd（sel.focusNode，sel.focusOffset）; 
 
 //当选择后退（从文档的最后到开始）时，处理这个情况
 if（range.collapsed！== sel.isCollapsed）{
 range.setStart（sel.focusNode，sel.focusOffset）; 
 range.setEnd（sel.anchorNode，sel.anchorOffset）; 
} 
} 
 
 if（range）{
 container = range.commonAncestorContainer; 
 
 //检查容器是否是文本节点，如果是这样，返回其父代码
返回container.nodeType === 3？ container.parentNode：container; 
} 
} 
} 
  

I am looking for a solution that works cross browser i.e. IE, Firefox and Safari.

解决方案

By "editable content window" I'm going to assume you mean an element with contenteditable turned on or a document with designMode turned on.

There are also two cases to consider: the case when the user has made a selection and the case where there is just a caret. The code below will work in both cases, and will give you the innermost element that completely contains the selection. If the selection is completely contained within a text node it's slightly complicated to get that text node in IE (trivial in other browsers), so I haven't provided that code here. If you need it, I can dig it out.

function getSelectionContainerElement() {
    var range, sel, container;
    if (document.selection && document.selection.createRange) {
        // IE case
        range = document.selection.createRange();
        return range.parentElement();
    } else if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt) {
            if (sel.rangeCount > 0) {
                range = sel.getRangeAt(0);
            }
        } else {
            // Old WebKit selection object has no getRangeAt, so
            // create a range from other selection properties
            range = document.createRange();
            range.setStart(sel.anchorNode, sel.anchorOffset);
            range.setEnd(sel.focusNode, sel.focusOffset);

            // Handle the case when the selection was selected backwards (from the end to the start in the document)
            if (range.collapsed !== sel.isCollapsed) {
                range.setStart(sel.focusNode, sel.focusOffset);
                range.setEnd(sel.anchorNode, sel.anchorOffset);
            }
        }

        if (range) {
           container = range.commonAncestorContainer;

           // Check if the container is a text node and return its parent if so
           return container.nodeType === 3 ? container.parentNode : container;
        }   
    }
}

这篇关于如何使用Javascript在浏览器的可编辑内容窗口中找到游标的DOM节点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！