代码之家 › 专栏 › 技术社区 › Smern

获取文本中的单击位置(非输入)

click html javascript

Smern · 技术社区 · 8 年前

目标:使用IE11获取非输入元素(跨度/分隔)中单击的文本位置

我有一个工作台供用户使用小部件添加和修改内容。有一个主窗口小部件具有不同类型的内容列表,例如,它可能具有如下内容:

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

用户将在这个窗口中单击,它将打开另一个小部件,其中的摘要内容将在一个文本区域内(实际上是一个代码镜像实例)。新的要求是,如果用户在 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一起工作。我假设它与“这是一项实验性技术”有关。

1 回复 | 直到 8 年前

Smern 8 年前

我能够将一些东西拼凑在一起,并提出了这个在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) );
}

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前