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

Posted 2023-05-07

【中文标题】如何限制 chrome 中的最大 textarea 宽度和高度或如何禁用 textarea 调整大小

【英文标题】：How to restrict max textarea width and height in chrome or how to disable textarea resizing

【发布时间】：2011-11-04 11:56:26

【问题描述】：

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

【问题讨论】：

您可以使用CSS - max-width 和max-height

你不应该使用resize: none，除非你绝对必须。不能调整小textareas 的大小确实很烦人。

【参考方案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 的大小调整。