textarea高度自适应CSS/JS方案 根据内容自动调整高度至滚动条消失

使得 textarea 高度自适应，即根据内容自动调整高度，避免出现滚动条或空白，可以用下文几种方式：

1. 纯样式 CSS 解决方案:

这是最简单的方法，不需要 JavaScript，并且兼容性好。利用 resize: none 禁用手动调整大小，并使用 overflow: hidden 隐藏滚动条。核心是设置 height: auto 和 min-height 来实现自适应。

textarea {
  resize: none;
  overflow: hidden;
  min-height: 50px; /* 设置一个最小高度 */
  height: auto;
  box-sizing: border-box; /* 包含 padding 和 border */
}

这种方法的优点是简单易用，但缺点是高度变化时可能会出现轻微的抖动，而且无法完美处理所有情况，例如换行符或不同字体大小的影响。

2. JavaScript 解决方案:

JavaScript 可以更精确地控制 textarea 的高度，并提供更流畅的体验。基本思路是监听 textarea 的 input 事件，然后根据内容计算高度。

const textarea = document.getElementById('myTextarea');

textarea.addEventListener('input', () => {
  textarea.style.height = 'auto'; // 先重置高度，以便根据内容重新计算
  textarea.style.height = (textarea.scrollHeight) + 'px'; // 设置高度为滚动高度
});

这种方法可以更精确地控制高度，避免抖动，并能处理各种情况，例如换行符和不同字体大小。

3. contenteditable div 结合 CSS:

可以使用一个 div 元素，并设置 contenteditable 属性使其可编辑，然后用 CSS 样式模拟 textarea 的外观和行为。

<div id="myTextarea" contenteditable="true" style="min-height: 50px; overflow: hidden; box-sizing: border-box;"></div>

#myTextarea {
  border: 1px solid gray;
  padding: 5px;
  white-space: pre-wrap; /* 保留换行符 */
  overflow-y: auto; /*  允许出现垂直滚动条，如果内容超出 */
}

这种方法的优点是可以更灵活地控制样式，但缺点是需要处理一些兼容性问题，例如光标位置和键盘事件。

选择哪种方法？

• 对于简单的场景，纯 CSS 解决方案就足够了。
• 对于需要更精确控制高度和更流畅体验的场景，建议使用 JavaScript 解决方案。
• 对于需要高度自定义样式的场景，可以考虑使用 contenteditable div。

额外提示：

• box-sizing: border-box; 很重要，它可以确保 padding 和 border 不影响计算出的高度。
• 可以根据需要调整 min-height 的值。
• JavaScript 解决方案中，可以添加 resize: vertical; 允许用户手动调整大小。
• 对于 contenteditable div，需要考虑一些额外的细节，例如 placeholder 的实现和键盘事件的处理。