判断textarea光标是否在首行/末行的JavaScript实现方案问询

我有一批初始为1行的textarea，通过以下函数实现内容自动扩展高度：

const resizeTextarea = (textarea) => {
  textarea.style.boxSizing = "border-box";
  textarea.style.height = "auto";
  textarea.style.height = `${textarea.scrollHeight}px`;
};

这些textarea通过useState存储在数组中，想要实现的交互逻辑：

• 按下上箭头时，仅当光标处于当前textarea的首行，才切换到上一个textarea
• 按下下箭头时，仅当光标处于当前textarea的末行，才切换到下一个textarea

遇到的核心问题：

1. 用\n判断行无效，因为文本是浏览器自动换行而非手动输入的换行
2. 虽然textarea宽度固定，但自动换行后无法通过光标位置直接计算所在行
3. 想利用浏览器原生逻辑（首行按上箭头光标跳至内容开头、末行按下箭头跳至结尾），但不知道如何调用该逻辑
   此前查找的旧方案均不适用当前场景，尝试记录textarea行数后仍无法判断光标所在行。

利用浏览器原生光标行为判断首/末行 #

浏览器本身在textarea中按下上箭头时，如果已经在首行，光标会停在内容起始位置；按下下箭头在末行时，光标会停在内容末尾。我们可以通过对比按键前后的光标位置，判断是否处于首/末行：

1. 监听keydown事件，触发时记录当前光标位置
2. 等待浏览器执行原生光标移动行为后，对比光标位置是否变化
3. 如果光标位置未变化且处于内容首尾，则执行切换逻辑

React场景下的具体实现代码 #

import { useState, useRef } from 'react';

const TextareaList = () => {
  const [textareas, setTextareas] = useState(['', '', '']); // 示例初始内容数组
  const textareaRefs = useRef([]);

  // 自动调整高度函数
  const resizeTextarea = (textarea) => {
    textarea.style.boxSizing = "border-box";
    textarea.style.height = "auto";
    textarea.style.height = `${textarea.scrollHeight}px`;
  };

  const handleKeyDown = (e, index) => {
    const textarea = e.target;
    const startPos = textarea.selectionStart;
    const endPos = textarea.selectionEnd;

    // 处理上箭头切换
    if (e.key === 'ArrowUp') {
      setTimeout(() => {
        if (textarea.selectionStart === startPos && textarea.selectionStart === 0) {
          if (index > 0) {
            textareaRefs.current[index - 1].focus();
          }
        }
      }, 0);
    }

    // 处理下箭头切换
    if (e.key === 'ArrowDown') {
      setTimeout(() => {
        const contentLength = textarea.value.length;
        if (textarea.selectionStart === endPos && textarea.selectionStart === contentLength) {
          if (index < textareas.length - 1) {
            textareaRefs.current[index + 1].focus();
          }
        }
      }, 0);
    }
  };

  const handleChange = (e, index) => {
    const newTextareas = [...textareas];
    newTextareas[index] = e.target.value;
    setTextareas(newTextareas);
    resizeTextarea(e.target);
  };

  return (
    <div>
      {textareas.map((text, index) => (
        <textarea
          key={index}
          ref={el => textareaRefs.current[index] = el}
          value={text}
          onChange={(e) => handleChange(e, index)}
          onKeyDown={(e) => handleKeyDown(e, index)}
          style={{ width: '300px', minHeight: '24px', margin: '8px 0' }}
        />
      ))}
    </div>
  );
};

export default TextareaList;

关键逻辑说明 #

• 使用setTimeout延迟判断，确保浏览器已完成原生光标移动行为
• 对比按键前后的selectionStart/selectionEnd：无变化且处于内容首尾时，判定为当前在首/末行
• 通过ref获取目标textarea并调用focus()完成切换

精准判断优化方案 #

如果需要更精准的行位置判断，可以结合getClientRects()获取光标所在行的位置，对比textarea的首末行边界：

const getCursorLineRect = (textarea) => {
  const range = document.createRange();
  range.setStart(textarea.firstChild, textarea.selectionStart);
  range.setEnd(textarea.firstChild, textarea.selectionEnd);
  return range.getBoundingClientRect();
};

之后对比该矩形的top是否等于textarea的scrollTop（首行），或bottom是否等于textarea.scrollTop + textarea.clientHeight（末行），这种方法不受内容变化影响，判断更准确。

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