使用 jQuery 获取光标所在的元素

在开发网页应用程序时，经常会遇到需要获取光标当前所在的元素的需求。这在处理富文本编辑器、文字输入框等场景中尤为常见。在本文中，我们将介绍如何使用 jQuery 来获取光标所在的元素。具体来说，我们将重点关注在一个 div 元素中，设置 contenteditable 属性后，如何通过 jQuery 来获取光标所在的元素。

contenteditable 属性

contenteditable 是 HTML5 中提供的属性，用于指示元素是否可编辑。将其设置为 true 或者不设置任何值，就可以让元素变得可编辑。在本文中，我们将会使用 contenteditable 属性来实现一个可编辑的 div 元素。

使用 jQuery 获取光标所在的元素

首先，我们需要一个 div 元素，并设置其为可编辑状态：

<div id="editable" contenteditable="true">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

接下来，我们编写 jQuery 代码来实现获取光标所在的元素的功能：

$(document).ready(function() {
  $('#editable').on('keyup', function() {
    var selection = window.getSelection();
    var range = selection.getRangeAt(0);
    var node = range.commonAncestorContainer;
    
    // 如果光标在文本节点中
    if (node.nodeType === 3) {
      node = node.parentNode;
    }
    
    console.log(node);
  });
});

在上面的代码中，我们首先监听 #editable 元素的 keyup 事件。当用户进行输入时，会触发该事件。然后，我们通过 window.getSelection() 获取光标的选区，再通过 selection.getRangeAt(0) 获取选区的范围。最后，通过 range.commonAncestorContainer 获取光标所在的元素。

状态图

下面我们用状态图来展示整个获取光标所在元素的流程：

stateDiagram
    [*] --> 初始化
    初始化 --> 就绪: 就绪
    就绪 --> 获取光标: 用户输入
    获取光标 --> 就绪: 用户输入

完整代码

结合以上的代码片段，我们可以得到完整的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Get Cursor Element</title>
  <script src="
  <style>
    #editable {
      border: 1px solid #ccc;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div id="editable" contenteditable="true">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>

  <script>
    $(document).ready(function() {
      $('#editable').on('keyup', function() {
        var selection = window.getSelection();
        var range = selection.getRangeAt(0);
        var node = range.commonAncestorContainer;
        
        // 如果光标在文本节点中
        if (node.nodeType === 3) {
          node = node.parentNode;
        }
        
        console.log(node);
      });
    });
  </script>
</body>
</html>

结论

通过以上的示例代码，我们可以看到如何使用 jQuery 来获取光标所在的元素。这在处理文本编辑器等场景中是非常有用的技巧。希望本文对你有所帮助！