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

Question

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

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

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

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

score 191 · Accepted Answer

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

textarea
{
   resize: none;
}

或者只是简单地

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

有效属性为：both、horizontal、vertical、none

score 2 · Accepted Answer

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

textarea {
    resize: none;
}

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

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

textarea[name=foo] {
    resize: none;
}

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

#foo {
    resize: none;
}

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

score -1 · Accepted Answer

safari max-height max-width 机会也适用于 firefox 4.0 (b3pre)。顺便说一句，这里的好例子：http ://www.alanedwardes.com/posts/safari-and-resizable-textboxes/

3 回答 3