Question

我有一个带有contenteditable =“true”的DIV元素。当我在这个div中写入文本时，我会得到多个

元素。

以下是link示例。

问题

如何获取包含光标的

元素？能够获得光标的索引位置（以跨浏览器支持的方式）将是非常好的。

谢谢！

更新通过光标索引位置，我不一定意味着X，Y坐标。我的意思是句子的字符串索引位置，例如。

Answer 1

你需要这样的东西吗？
HTML

<section contenteditable="true" id="editable">
  <h2>Go ahead, edit away!</h2>
  <p>Here's a typical paragraph element</p>
  <ol>
    <li>and now a list</li>
    <li>with only</li>
    <li>three items</li>
  </ol>
</section>

JS代码：

$('#editable').mousemove(function(e){
    console.log(e.target.nodeName);
    console.log(e.pageX + ", " + e.pageY);
});

注意：您还可以将mousemove事件更改为您想要的内容，例如：click，hover等。

Answer 2

我认为通常的节点（基本上是非输入节点）没有聚焦标志。但在你可以写入元素之前，你必须点击它。您可以挂钩click事件以获取节点。

（例如，使用jQuery：

$('document').on('click', function() {
    console.log('you have clicked on: ', $(this));
});

）

Answer 3

我会想象做类似的事情：

var hovered;
$('div[contenteditable] *').bind('mouseenter.editable', function(e) {
  e.stopPropagation();

  hovered = this;

  console.log(this);
  console.log($(this).index());
  console.log(e.pageX);
  console.log(e.pageY);
});

只需拥有一个在悬停时更改的全局变量，stopPropagation()以确保没有父元素＆＃34;获得信用＆＃34;，然后您可以使用this，{{ 1}}，e.pageX轻松。

Answer 4

您可以将onMouseOver属性添加到容器中，使它们运行代码以更改某些变量。当鼠标退出容器时，您还可以使用onMouseOut属性从变量中删除值。

这是该代码的示例：

HTML：

<!doctype html>
   <html>
     <head>
       <title>Example page</title>
       <script src="your/script/path.js"></script>
     </head>
     <body>
       <p id="1" onMouseOver="setParagraph(this)">Example paragraph 1</p>
       <p id="2" onMouseOver="setParagraph(this)">Example paragraph 2</p>
     </body>
   </html>

使用Javascript：

var mouseOverParagraph,
    setParagraph = function (el) {
      'use strict';
      mouseOverParagraph = el.id;
    }

Answer 5

您可以使用jQuery焦点选择器查找哪个元素具有光标焦点：

var focusedP = null;
$(document).on("focus","p[contenteditable]",function(){
    focusedP = $(this);
})
$(document).on("blur","p[contenteditable]",function(){
    focusedP = null;
})

JSFiddle

至于元素中的光标位置，我不能说，但是你可以通过捕获鼠标点击并获得相对坐标来计算出最初点击的字符。使用静态字体大小和行高，您可以根据coords计算它所在的行和字符。

如何获取光标所在的<p>？</p>

5 个答案: