textarea开启自动高度后光标跳变问题及解决方案咨询

你的问题出在自动高度计算时的布局突变：当前代码在input事件里先把textarea高度设为0，再重新计算设置高度，这会触发元素快速收缩再展开，导致浏览器重新计算光标位置，最终出现跳动。

修复方案：记录并恢复光标位置 #

修改#handleTextareaInput函数，在调整高度前保存光标状态，调整后恢复，就能避免偏移：

#handleTextareaInput = () => {
  // 保存当前光标选中范围
  const start = this.#textarea.selectionStart;
  const end = this.#textarea.selectionEnd;

  // 计算目标高度，直接基于scrollHeight，无需先重置为0
  const targetHeight = Math.max(this.#minHeightTA, this.#textarea.scrollHeight) + 'px';

  // 仅当高度变化时更新，减少不必要的重排
  if (this.#textarea.style.height !== targetHeight) {
    this.#textarea.style.height = targetHeight;
  }

  // 恢复光标位置
  this.#textarea.setSelectionRange(start, end);
}

额外优化点 #

1. 移除不必要的高度重置：原代码中this.#textarea.style.height = 0是多余的，scrollHeight已经能准确获取内容的实际高度，直接基于它计算即可。
2. 增加高度变化判断：只有当目标高度和当前高度不一致时才更新，减少浏览器的重排操作，提升性能。

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