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

Question

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

但是，在Safari中，右下方有一个“句柄”工具，允许用户通过单击和拖动来调整文本区域的大小。我还注意到stackoverflow的一个问题页面中的textarea问题。这个工具很混乱，基本上妨碍了。

那么，无论如何都要隐藏这个调整大小的句柄？

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

Answer 1

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

textarea
{
   resize: none;
}

或只是简单地

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

有效属性包括：水平，垂直，无

Answer 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控件。

Answer 3

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