在一个可编辑的div中获取光标位置

Question

在一个可编辑的div中获取光标位置

3

在一个可编辑的div中，我有一些文字和一张图片，例如He✈llo。

但是在js文件中，这个可编辑的div应该像这样：He<img src="plane.gif">llo 当我把光标放在飞机图像后面并使用window.getSelection.getRangeAt(0)，它会将光标/插入符号位置显示为3。我需要它将插入符号位置显示为24，即将图片视为img标签，并在img标签的末尾显示插入符号的位置。

有没有办法实现这个功能？

我制作了这个示例，虽然它不能正确地工作，但可以让您了解我想说什么。

- iamsaksham

你能提供一个 JSFiddle 吗？ - user1846747

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mihutz · Accepted Answer

如果我理解你想做什么的话，这应该可以解决你的问题（只需在文本的不同字符之间单击即可）：

$('p').bind('click', function(event) {
  finalCount = 0;
  var selection = window.getSelection().getRangeAt(0);
  var count = 0;
  $($(this).contents()).each(function(index, val) {

    if ($(val).html() == null) {
      count += selection.startOffset;
    } else {
      count += $(val).get(0).outerHTML.length;
    }
    if ($(val).text() == selection.startContainer.nodeValue) {
      console.log('found!');
      finalCount = count;
    }
  });

  alert(finalCount);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <p class="text" style="margin-left:5px">He
    <img src="http://www.micronas.com/sites/all/themes/micronas/images/icons/image-x-generic.png">llo</p>
</body>