Question

目标：使用IE11获取非输入元素（spans / divs）内点击的文字位置

我有一个工作台，供用户使用小部件添加和修改内容。有一个主窗口小部件，其中包含不同类型内容的列表，例如它可能包含：

<div class='summaryView'>
    <div class='summaryHead'>Summary 1</div>
    <div class='summaryContent'>Foo bar baz</div>
</div>

用户将在此内单击并打开另一个小部件，其中摘要内容将位于textarea（实际上是codemirror实例）中。一个新的要求是，如果用户在a中的b和bar之间进行点击（例如），当小部件打开以便他们开始编辑内容时，光标将在那个地方。

我这样做的问题是知道他们点击的实际位置。我可以从活动中获得坐标...但这对我没有帮助（除非我使用的是等宽字体，这不是一个选项）。

我还发现document.caretPositionFromPoint和document.caretRangeFromPoint似乎很有帮助......我可以这样做：

if (document.caretPositionFromPoint) {
    range = document.caretPositionFromPoint(e.pageX, e.pageY);
    textNode = range.offsetNode;
    offset = range.offset;

} else if (document.caretRangeFromPoint) {
    range = document.caretRangeFromPoint(e.pageX, e.pageY);
    textNode = range.startContainer;
    offset = range.startOffset;
}

...然后从那里开始......除了这些不适用于IE11（不幸的是我的用户坚持使用）。

即使documentation似乎表明它应该与IE一起使用。我假设它与＆＃34有关;这是一项实验性技术＆＃34;。

Answer 1

我能够把一些东西放在一起然后想出这个似乎在IE11中对我有用的东西，给了我parentElement和点击的文本偏移量：

if (document.body.createTextRange) {
    range = document.body.createTextRange ();
    range.moveToPoint (event.clientX, event.clientY);
    var end = Math.abs( range.duplicate().moveEnd('character', -1000000) );
    var rDup = range.duplicate();
    range.collapse( false );
    var parentElement = rDup.parentElement();
    var children = parentElement.getElementsByTagName('*');
    for (var i = children.length - 1; i >= 0; i--) {
        rDup.moveToElementText( children[i] );
        if ( rDup.inRange(range) ) {
            parentElement = children[i];
            break;
        }
    }
    rDup.moveToElementText( parentElement );
    var offset = end - Math.abs( rDup.moveStart('character', -1000000) );
}

获取文本中的单击位置（非输入）

1 个答案: