如何限制 chrome 中的最大 textarea 宽度和高度或如何禁用 textarea 调整大小答案

【问题标题】：How to restrict max textarea width and height in chrome or how to disable textarea resizing如何限制 chrome 中的最大 textarea 宽度和高度或如何禁用 textarea 调整大小
【发布时间】：2011-11-04 11:56:26
【问题描述】：

Chrome 允许通过在右下角使用药物来调整文本区域的大小，但有时这种移动可能会破坏页面的设计，所以我想知道如何限制该操作的最大和最小宽度如何禁用该操作页面上有thml/javascript/css 的功能？

【问题讨论】：

您可以使用CSS - max-width 和max-height
你不应该使用resize: none，除非你绝对必须。不能调整小textareas 的大小确实很烦人。

标签： javascript html css google-chrome textarea

【解决方案1】：

你可以使用：

resize: vertical; 
max-height: 200px;

【讨论】：

最适合我的解决方案！
这应该是选择的答案。完全禁用调整大小确实让用户感到沮丧，您应该能够至少在一定程度上垂直调整大小/

【解决方案2】：

您也可以仅通过以下方式限制水平调整大小：

resize: horizontal;

并且只有垂直调整大小：

resize: vertical;

【讨论】：

【解决方案3】：

您可以使用以下 css 禁用重新调整大小：

resize: none;

【讨论】：

【解决方案4】：

这都是 CSS 的问题。要禁用调整大小（拖动拇指），只需使用resize: none;。限制大小 max(min)-width 和 height 应该可以解决问题。

【讨论】：

【解决方案5】：

textarea.vertical {
  resize: vertical;
  max-height: 130px;
  min-height: 80px;
}

textarea.horizontal {
  resize: horizontal;
  max-width: 130px;
  min-width: 80px;
}

<p>Horizontally resizable textarea</p>
<textarea type="text" class="horizontal"></textarea>
<br>
<p>Vertically resizable textarea</p>
<textarea type="text" class="vertical"></textarea>

您可以将resize属性设置为水平和垂直或将其设置为默认值（用户可以双向拉伸）。

如果您要设置resize: horizontal，那么您需要将附加属性添加为max-width:200px;

如果您要设置resize: vertical，则需要将附加属性添加为max-height:200px;

【讨论】：

您与水平调整大小有关的代码 sn-p 似乎不起作用。
@mishsx 您需要增加 textarea 的 max-width 以进一步拉伸它。我刚刚提供了样本宽度

【解决方案6】：

你可以使用

resize:none

限制textarea 的大小调整。

【讨论】：