在 Safari 中隐藏 textarea 调整大小句柄

Posted 2023-03-05

【中文标题】在 Safari 中隐藏 textarea 调整大小句柄

【英文标题】：Hiding textarea resize handle in Safari

【发布时间】：2010-10-09 22:34:22

【问题描述】：

我在我的应用程序中使用 textarea 组件，并动态控制它们的高度。当用户键入时，只要有足够的文本，高度就会增加。这在 IE、Firefox 和 Safari 上运行良好。

然而，在 Safari 中，右下角有一个“手柄”工具，允许用户通过单击和拖动来调整文本区域的大小。我还注意到 *** Ask a Question 页面中 textarea 的这个问题。该工具令人困惑，基本上会妨碍您。

那么，有没有办法隐藏这个调整大小的句柄？

（我不确定“handle”是否是正确的词，但我想不出更好的词。）

【参考方案1】：

您可以使用 CSS 覆盖调整大小的行为：

textarea

   resize: none;

或者干脆

<textarea style="resize: none;">TEXT TEXT TEXT</textarea>

有效属性为：both、horizo​​ntal、vertical、none

【讨论】：

这里不严格相关，但 Safari 也尊重 min-height、max-height、min-width 和 max-width CSS 属性以启用调整大小，但限制它可以调整的范围。

谢谢！正要问同样的问题:)

如果我在设置 resize:none 后想在悬停时显示它怎么办？

@Michael Forrest: 你试过 textarea:hover resize: inherit !important; ?我没试过，只是猜测。

一个警告：不允许用户调整<textarea> 的大小可能是一个可用性问题。设置resize:vertical; 通常是更好的选择。它不应该弄乱你的布局，它会给用户更大的控制感。

【参考方案2】：

使用以下 CSS 规则为所有 TextArea 元素禁用此行为：

textarea 
    resize: none;

如果您想为某些（但不是全部）TextArea 元素禁用它，您有几个选择（感谢this page）。

要禁用特定的TextArea 并将name 属性设置为foo（即<TextArea name="foo"></TextArea>）：

textarea[name=foo] 
    resize: none;

或者，使用 ID（即<TextArea id="foo"></TextArea>）：

#foo 
    resize: none;

请注意，这仅与基于 WebKit 的浏览器（即 Safari 和 Chrome）相关，它们将调整大小句柄添加到 TextArea 控件。

【参考方案3】：

Safari 最大高度最大宽度机会也适用于 Firefox 4.0 (b3pre)。顺便说一句，这里有很好的例子：http://www.alanedwardes.com/posts/safari-and-resizable-textboxes/