JavaScript实现contenteditable光标是否在最后一行的判断

需求说明 #

实现JavaScript功能：判断contenteditable元素内的光标是否位于最后一行，满足则返回true，否则返回false。

初始代码的问题 #

以下初始尝试的代码逻辑错误，无论光标处于哪一行（非最后一行）均返回true，不符合预期：

function checkLine() {

  var myElement = document.getElementById('editor');
   var startPosition = myElement.selectionStart;
   var endPosition = myElement.selectionEnd;
   var endofLine = false;

 if(startPosition == endPosition){
    endofLine = true;
 }
  return endofLine;
}

错误原因：误将光标是否为折叠状态（无选中内容）当成了是否在最后一行的判断条件，和实际需求完全无关。

优化后的代码 #

针对提供的待优化框架，修正其中的选择器混用、判断逻辑不严谨等问题，完善后的代码如下：

function checkLine() {
  const editor = document.getElementById('editor');
  // 获取编辑器最后一个子元素（兼容div/p等不同换行标签）
  const lastBlock = editor.querySelector(':last-child');
  
  // 无子元素则说明只有一行内容
  if (!lastBlock) {
    return true;
  }

  const sel = window.getSelection();
  // 无光标/选中内容时返回false
  if (sel.rangeCount === 0) {
    return false;
  }

  const range = sel.getRangeAt(0);
  let cursorContainer = range.startContainer;
  
  // 光标在文本节点时，取其父元素
  if (cursorContainer.nodeType !== Node.ELEMENT_NODE) {
    cursorContainer = cursorContainer.parentNode;
  }

  // 判断光标所在元素是否属于最后一个块级元素的范围
  return lastBlock.contains(cursorContainer);
}

优化点说明 #

• 统一使用原生DOM方法，避免jQuery与原生API混用导致的问题
• 用:last-child替代:last-of-type，确保获取编辑器的最后一个子元素，兼容不同换行生成的标签（如<div>、<p>）
• 增加光标不存在的边界判断，避免报错
• 优化容器判断逻辑：通过contains方法覆盖光标在最后一行子元素（如<span>、加粗文本）内的场景，确保判断准确
• 使用Node.ELEMENT_NODE替代硬编码数值，提升代码可读性

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