如何让textarea根据内容宽度自适应，同时限制最小/最大宽度？

要实现textarea宽度随内容自适应，同时遵守min-width和max-width限制，仅靠CSS无法完成，得结合JavaScript和一个辅助元素来模拟内容宽度。以下是完整的实现方案，同时保留你已有的高度自适应功能：

核心思路 #

使用一个隐藏的<div>作为影子元素，让它和textarea拥有完全一致的字体、内边距等样式，这样影子元素的宽度就是内容所需的实际宽度。通过JS将这个宽度同步给textarea，并限制在设置的最小/最大宽度范围内。

完整代码 #

HTML #

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.3.min.js"></script>
<!-- 用于计算内容宽度的隐藏辅助元素 -->
<div class="textarea-shadow"></div>
<textarea>this is my normal content, and it has to consider this content to be as long as the max-width</textarea>
<textarea>this is my normal content, should be consider</textarea>
<textarea>this is my min content</textarea>

CSS #

textarea{
  border: 1px solid black;
  min-width: 50px;
  max-width: 300px;
  font: inherit;
  padding: 4px;
  box-sizing: border-box; /* 确保内边距不影响宽度计算 */
}

.textarea-shadow {
  position: absolute;
  visibility: hidden;
  white-space: nowrap; /* 强制单行，保证宽度计算准确 */
  padding: 4px;
  font: inherit;
  min-width: 50px;
  max-width: 300px;
  box-sizing: border-box;
}

JavaScript #

// 初始化所有textarea
$("textarea").each(function () {
  // 设置初始高度
  this.style.height = this.scrollHeight + "px";
  // 设置初始宽度
  updateWidth(this);
}).on("input", function () {
  // 更新高度（保留你原有的逻辑）
  this.style.height = 0;
  this.style.height = this.scrollHeight + "px";
  // 更新宽度
  updateWidth(this);
});

// 触发一次input事件完成初始化
$("textarea").trigger("input");

// 计算并更新textarea宽度的工具函数
function updateWidth(textarea) {
  const shadow = $(".textarea-shadow");
  // 同步textarea内容到影子元素
  shadow.text(textarea.value || textarea.placeholder);
  // 获取影子元素的实际宽度
  const contentWidth = shadow[0].offsetWidth;
  // 获取设置的最小/最大宽度
  const minW = parseInt($(textarea).css("min-width"), 10);
  const maxW = parseInt($(textarea).css("max-width"), 10);
  // 计算最终宽度（限制在min和max之间）
  const finalW = Math.max(minW, Math.min(maxW, contentWidth));
  // 设置textarea宽度
  textarea.style.width = finalW + "px";
}

实现效果 #

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