如何在点击按钮时判断contenteditable div中是否存在插入符

嘿，我来帮你搞定这个问题！要判断点击按钮时，contenteditable的div里有没有光标（插入符），咱们可以利用浏览器的选区API来实现，下面是具体的方案：

核心思路 #

浏览器提供了window.getSelection()方法来获取当前页面的文本选区，我们可以通过这个API检查：

1. 当前是否存在有效的选区范围
2. 选区的起始节点是否位于目标div内部
3. 目标div是否处于聚焦状态（确保光标确实在这个div里，而不是其他元素）

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        #div1 { border : 1px solid black; padding: 8px; min-height: 40px; }
    </style>
</head>
<body>
    <div id="div1" contenteditable="true"></div><br>
    <button id='clickme'>检查光标是否存在</button>

    <script>
        $('#clickme').on('click', function(){
            const targetDiv = document.getElementById('div1');
            const selection = window.getSelection();
            
            // 初始化判断结果为false
            let hasCaret = false;

            // 检查是否有选区范围，且焦点在目标div上
            if (selection.rangeCount > 0 && document.activeElement === targetDiv) {
                const range = selection.getRangeAt(0);
                // 检查选区的起始节点是否在目标div内部（或就是div本身）
                hasCaret = targetDiv.contains(range.startContainer);
            }

            // 输出结果
            if (hasCaret) {
                console.log("光标存在");
            } else {
                console.log("光标不存在");
            }
        });
    </script>
</body>
</html>

代码解释 #

• window.getSelection(): 获取当前页面的选区对象，里面包含了光标或选中文本的位置信息
• selection.rangeCount: 判断是否存在有效的选区范围（光标本质上是一个起始和结束位置相同的选区）
• document.activeElement: 确认当前焦点在目标div上，避免光标在其他元素时误判
• targetDiv.contains(range.startContainer): 检查选区的起始节点是否属于目标div的DOM范围，确保光标确实在这个div内部

测试场景 #

• 点击div激活光标后，再点按钮：输出“光标存在”
• 光标不在div里（比如点击页面空白处、其他元素），再点按钮：输出“光标不存在”

内容的提问来源于stack exchange，提问作者user10704605