gpt4 book ai didi

javascript - 单击时确定 HTML 元素中字符的位置索引

转载 作者:可可西里 更新时间:2023-11-01 01:18:24 26 4
gpt4 key购买 nike

我有一个 HTML 元素,里面只有可见的文本。这个例子是 <div>元素,但它可能是一个 <span> , <p> , 或其他 DOM 元素。

<div>This is a simple example.</div>

单击时,我可以获得光标在 div 表面上的位置,但我需要在单击时确定最近字符的位置和/或其在 div.innerHTML 字符串中的索引。

我在 SVG 文本实体的“getCharNumAtPosition”方法中发现了类似的实现 here .

是否可以在与 HTML 一起使用的 JavaScript 中实现这样的功能?

(如果解决方案可以跨大多数现代浏览器移植,适用于大多数书面语言,并且基于相对稳定的标准,这样它们以后就不会出现问题,那么这些解决方案将是最有用的。)

最佳答案

$('div').click( function () {
getSelectionPosition ();
});


function getSelectionPosition () {
var selection = window.getSelection();
console.log(selection.focusNode.data[selection.focusOffset]);
alert(selection.focusOffset);
}

这适用于“点击”以及大多数浏览器的“范围”。 ( selection.type = "caret"/selection.type = "range" )。

selection.focusOffset()为您提供在内部节点中的位置。如果元素嵌套,则在 <b> 内或 <span>例如标签,它会给你内部元素内的位置,而不是全文,或多或少。我无法使用 focusOffset “选择”子标签的第一个字母和“插入符号”类型(单击,而不是范围选择)。当您单击第一个字母时,它会给出标记开始前最后一个元素的位置加 1。当您单击第二个字母时,它会正确地给出“1”。但是我没有找到访问子元素的第一个元素(偏移量0)的方法。这种“选择/范围”的东西似乎有问题(或者对我来说非常不直观)。 ^^

不过不用嵌套元素用起来还是挺简单的! (适用于您的 <div> )

Here is a fiddle

重要编辑 2015-01-18:

此答案在被接受时恢复正常,但不再有效,原因如下。其他答案现在最有用。

  • 马修的一般回答
  • Douglas Daseeco 提供的工作示例。

Firefox 和 Chrome 均已调试 window.getSelection()行为。可悲的是,它现在对这个用例毫无用处。 (阅读文档,IE 9 及更高版本的行为应相同)。

现在,一个字符的中间用来决定偏移量。这意味着点击一个字符可以返回 2 个结果。第一个字符为 0 或 1,第二个字符为 1 或 2,依此类推。

我更新了 JSFiddle example .

请注意,如果您调整窗口大小(Ctrl + 鼠标),Chrome 上的一些点击行为会出现错误。

关于javascript - 单击时确定 HTML 元素中字符的位置索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8105824/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com