如何确定字符在div元素中的位置？ [英] How to determine the position of a character in a div element?

问题描述

我有一个只有文本内部的DIV元素。例如：

 < div>这是一个简单的例子< / div> 
  

当我点击它，它给我的光标在div的表面上的位置，I需要确定最接近的字符的位置和/或其索引在div.innerHTML字符串中。我在SVG文本实体的getCharNumAtPosition方法中找到了类似的实现：

http://msdn.microsoft.com/en-us/library/windows/apps/hh466412%28v=vs .85％29.aspx

是否可以使用HTML元素在JavaScript中实现这样的函数？

解决方案

  $（'div'）。click（function（）{
 getSelectionPosition（）; 
} ; 
 
 
函数getSelectionPosition（）{
 var selection = window.getSelection（）; 
 console.log（selection.focusNode.data [selection.focusOffset]）; 
 alert（selection.focusOffset）; 
} 
  

这适用于点击，以及一个范围大多数浏览器。 （ selection.type =caret / selection.type =range）。
$ b

selection.focusOffset（）给出内部节点中的位置 。如果元素是嵌套的，例如，在< b> 或< span> 位置在内部元素内，不是全文，或多或少。我无法使用 focusOffset 和caret类型（点击，而不是范围选择）选择子标记的第一个字母。当你点击第一个字母，它给出了标签开始前最后一个元素的位置加1.当你点击第二个字母，它正确地给你1。但我没有找到一种方法来访问子元素的第一个元素（偏移0）。这个选择/范围的东西似乎错误（或非常不直观的我）。 ^^

但是使用没有嵌套元素相当简单！ （与您的< div> ）兼容

这里是一个小提琴

重要编辑2015-01-18：

Firefox和Chrome都调试了 window.getSelection（）行为。可悲的是，它现在对这个用例没有用。 （阅读文档，IE 9及更高版本的行为应该相同）。

现在，字符的中间用于决定偏移量。这意味着点击一个字符可以给出2个结果。第一个字符为0或1，第二个为1或2等。

我更新了 JSFiddle示例。

请注意，如果调整窗口大小（ Ctrl ，在Chrome上的某些点击行为是相当bug。

所以这个接受的答案不再工作了。所以马修的答案是最好的选择。

I have a DIV element with only text inside. For example:

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

When I click on it, it gives me the position of the cursor on surface of the div, I need to determine the position of the nearest character and/or it's index in the div.innerHTML string. I found a similar implementation in the "getCharNumAtPosition" method in SVG text entities here:

http://msdn.microsoft.com/en-us/library/windows/apps/hh466412%28v=vs.85%29.aspx

Is it possible to implement a such function in JavaScript using HTML elements?

解决方案

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


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

This works with "click", as well as with a "range" for most browsers. (selection.type = "caret" / selection.type = "range").

selection.focusOffset() gives you the position in the inner node. If elements are nested, within <b> or <span> tags for example, it will give you the position inside the inner element, not the full text, more or less. I'm unable to "select" the first letter of a sub tag with focusOffset and "caret" type (click, not range select). When you click on the first letter, it gives the position of the last element before the start of tag plus 1. When you click on the second letter, it correctly gives you "1". But I didn't find a way to access the first element (offset 0) of the sub element. This "selection/range" stuff seems buggy (or very non-intuitive to me). ^^

But it's quite simple to use without nested elements! (Works fine with your <div>)

Here is a fiddle

Important edit 2015-01-18:

Both Firefox and Chrome debugged window.getSelection() behavior. Sadly, it is now useless for this use case. (Reading documentation, IE 9 and beyond shall behave the same).

Now, the middle of a character is used to decide the offset. That means that clicking on a character can give back 2 results. 0 or 1 for the first character, 1 or 2 for second, etc.

I updated the JSFiddle example.

Please note that if you resize the window (Ctrl + mouse), the behavior is quite buggy on Chrome for some clicks.

So this accepted answer doesn't work anymore. So Matthew's answer is the best option.

这篇关于如何确定字符在div元素中的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！