Javascript 如何获取<；p>；光标在哪里？_Javascript_Jquery_Html

Javascript 如何获取<；p>；光标在哪里？

javascript jquery html

Javascript 如何获取<；p>；光标在哪里？,javascript,jquery,html,Javascript,Jquery,Html,我有一个contenteditable=“true”的DIV元素。当我将文本写入这个div时，我得到了多个元素这里有一个例子问题如何获取包含光标的元素？如果能够获得光标的索引位置（以跨浏览器支持的方式），那就太好了谢谢已更新关于光标索引位置，我不一定指X，Y坐标。例如，我指的是一个句子的字符串索引位置。你需要这样的东西吗 HTML 注意：您还可以将mousemove事件更改为您想要的任何事件，例如：单击，悬停等等。我认为通常的节点（基本上是非输入节点）没有聚焦标志。但是，在写入元

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

这里有一个例子

问题

如何获取包含光标的元素？如果能够获得光标的索引位置（以跨浏览器支持的方式），那就太好了

谢谢

已更新

关于光标索引位置，我不一定指X，Y坐标。例如，我指的是一个句子的字符串索引位置。

你需要这样的东西吗
HTML

注意：您还可以将

mousemove

事件更改为您想要的任何事件，例如：

单击

，

悬停

等等。

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

（例如，使用jQuery：

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

)

我会想象这样做：

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（）

，以确保没有父元素“占上风”，您就可以轻松地使用

这个，e.pageX
，e.pageY
。
您可以将onMouseOver
属性添加到容器中，例如，让他们运行一个更改某些变量的代码。当鼠标退出容器时，还可以使用onMouseOut
属性删除变量中的值
这是该代码的一个示例：
HTML:
可以使用jQuery焦点选择器查找具有光标焦点的元素：
var focusedP = null;
$(document).on("focus","p[contenteditable]",function(){
    focusedP = $(this);
})
$(document).on("blur","p[contenteditable]",function(){
    focusedP = null;
})


至于光标在元素中的位置，我不能说，但是您可以通过捕获鼠标点击并获取相对坐标来确定最初点击的角色。使用静态字体大小和行高，您可以根据坐标计算出它所在的行和字符。
您是否尝试过使用is:focus？我认为这可能是一个很好的起点。JSfiddle使用焦点检查：@Smokey。这是一个答案。请“回答”这个问题。谢谢。@AlvinfromDiaspar只是你问题的一部分，但实际上大多数其他问题都只涉及主要部分，我已经添加了我的答案，并根据光标位置/索引快速说明了你的“会很好”。点击不一定正确。可能涉及到选项卡和/或箭头键。
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);
});

<!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>

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

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