无法调整文本区域高度的大小

Unable to resize the textarea height

本文关键字：高度 区域 调整 文本      更新时间：2023-09-26

我在项目中使用textarea时注意到一个奇怪的错误。
起初我认为我的代码中存在问题，但后来我能够复制该错误，在 JsFiddle 中提取 essenial。

问题是：
如果我之前没有用户进行任何交互就通过代码更改textarea的高度，则高度会卡在该大小。
例如，如果您单击"更改大小"按钮（在上面的jsfiddle中），然后尝试使用元素夹点（在右下角）将大小调整回初始大小，则无法。 这就像新高度是textarea的新"最小允许尺寸"一样。

我

做错了什么？我错过了什么？
提前谢谢你。

在 Chrome 中，高度会覆盖最小高度。

在旧版本的chrome中，没有限制。

因此，如果您使用身高，最小身高将是您的身高。所以你需要 仅设置最小高度和最大高度。高度覆盖最小高度 铬。

textarea{
  max-height: auto;
  min-height: 50px;
  resize: both;
}

好的，这个解决方案对我有用（chrome 版本 47.0.2526.111 m）：https://jsfiddle.net/ezsz8xr5/9/

我发现了这个感兴趣的链接：https://code.google.com/p/chromium/issues/detail?id=94583

似乎这是一个已知问题。

我知道这个问题已经问过一段时间了，但是没有好的答案，我找到了解决方案。

我发现，为文本区域放置 % 高度不会根据其父级更改它。

如果您将规则放在 resize: vertical ，手动更改高度，您会注意到浏览器会将 style.height 以像素为单位。

所以我试着放height: 150px，它奏效了。

所以这里有两个解决方案：

  1. 首先，以像素为单位放置文本区域的高度，而不是百分比。
parent {
    width: 150px;
}
parent textarea {
    height: 100%; /* not working ! */
}
/* Instead, do : */
/* css variable */
:host {
    --height: 150px;
}
parent {
    height: var(--height);
}
parent textarea {
    height: var(--height);
}

对于 SCSS 方式：

parent {
    $height: 150px;
    height: $height;
    textarea {
        height: $height;
    }
}
  1. 其次，将文本区域父项的显示声明为 flex，并且没有任何其他规则，它将自动调整文本区域的大小。如果没有，请执行以下操作：
parent {
    display: flex;
    /* if flex doesn't work by itself, add this + textarea rule : */
    flex-flow: column nowrap;
}
parent textarea {
    flex: 1; /* tells the textarea to fit all the free space it finds */
}

这似乎是一个浏览器问题，是的，可悲的是，在 2022 年仍未修复。如果它是故意的，那么它甚至没有被记录下来。

希望这将在未来对某人有所帮助。

相关文章：