如何让field-sizing属性在文本框被手动调整尺寸后恢复生效？

这个问题其实是浏览器默认行为导致的——当你手动拖拽调整textarea尺寸时，浏览器会直接给元素添加内联的width/height样式，而内联样式的优先级远高于CSS中设置的field-sizing: content，所以之后field-sizing就被“覆盖”了，没法再根据内容自动调整尺寸。你之前重新设置field-sizing没用，核心原因就是这些内联宽高样式还在抢占优先级。

那解决思路很明确：在用户完成拖拽调整后，移除浏览器自动添加的内联宽高样式，让CSS里的field-sizing重新接管尺寸控制。不过要注意，resize事件会在拖拽过程中连续触发，直接绑定事件会频繁操作DOM，所以我们可以用防抖（debounce）来优化，等用户停止拖拽一小段时间后再执行清理操作。

下面是具体的实现方案：

完整代码示例 #

CSS 部分（保留你的基础设置，可按需调整resize方向）

textarea {
  field-sizing: content;
  min-width: 6rem;
  max-width: 16rem;
  resize: horizontal; /* 允许横向调整，也可设为vertical或both */
}

HTML + JavaScript 部分

<textarea></textarea>

<script>
// 防抖函数：避免resize事件连续触发导致频繁DOM操作
function debounce(func, delay = 300) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

const textarea = document.querySelector('textarea');

// 绑定防抖后的resize处理逻辑
textarea.addEventListener('resize', debounce(() => {
  // 移除浏览器添加的内联宽高样式，让field-sizing重新生效
  textarea.style.removeProperty('width');
  textarea.style.removeProperty('height');
  
  // 可选：如果之前临时设置过resize: none，这里可以恢复原设置
  // textarea.style.resize = 'horizontal';
  // 可选：显式重新设置field-sizing（其实CSS中已有，这里仅做保险）
  // textarea.style.fieldSizing = 'content';
}));
</script>

关键逻辑解释 #

1. 防抖函数：确保只有当用户停止拖拽超过300毫秒后，才执行清理操作，避免DOM操作过于频繁影响性能。
2. 移除内联样式：style.removeProperty('width')和style.removeProperty('height')会彻底删掉浏览器手动添加的内联宽高，让CSS中的field-sizing: content重新获得尺寸控制权，textarea就能再次根据输入内容自动调整大小。

额外优化建议 #

如果你希望保留用户手动调整的尺寸作为新的参考范围，可以在清理内联样式前，把当前尺寸设置为min-width或max-width，比如：

const currentWidth = textarea.style.width;
textarea.style.removeProperty('width');
// 把用户调整的尺寸设为新的最小宽度
textarea.style.minWidth = currentWidth;

这样既尊重了用户的手动调整，又能让field-sizing在这个基础上继续根据内容动态调整（不会超过你设置的max-width）。

备注：内容来源于stack exchange，提问作者Oscar