如何禁用 textarea 的可调整大小的属性？

问题描述

我想禁用 textarea 的可调整大小的属性。

目前，我可以通过点击 textarea 的右下角并拖动鼠标来调整 textarea 的大小。如何禁用此功能？

最佳解决方案

以下 CSS 规则禁用 textarea 元素的调整大小行为：

textarea {
    resize: none;
}

要禁用某些（但不是全部）textarea，有几个选项。

要禁用 name 属性设置为 foo（即）的特定 textarea：

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

或者使用 id 属性（即）：

#foo {
    resize: none;
}

W3C 页面列出了调整大小限制的可能值：none，both，horizontal，vertical 和 inherit：

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

查看一个体面的兼容性页面，看看目前支持这个功能的浏览器。正如 Jon Hulka 所言，使用 max-width，max-height，min-width 和 min-height 可以在 CSS 中进一步限制尺寸。

Super important to know:

This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you’ll have to set something like overflow: scroll;

Quote by Chris Coyier,
http://css-tricks.com/almanac/properties/r/resize/

次佳解决方案

在 CSS …

textarea {
    resize: none;
}

第三种解决方案

我找到 2 件事情

第一

textarea{resize:none}

这是一个尚未发布但与 Firefox4 + chrome 和 safari 兼容的 css3

另一个格式功能是溢出：自动摆脱正确的滚动条，考虑到 dir 属性

代码和不同的浏览器

基本的 html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

一些浏览器

FF 17.0.1

第四种方案

CSS3 有一个新的 UI 元素，将允许您这样做。该属性是 resize 属性。因此，您可以将以下内容添加到样式表中，以禁止调整所有 textarea 元素的大小：

textarea { resize: none; }

这是一个 CSS3 属性; 使用兼容性图表来查看浏览器兼容性。

就个人而言，我觉得在 textarea 元素上禁用大小调整非常烦人。这是设计人员试图向用户客户端”break” 的情况之一。如果您的设计无法容纳较大的 textarea，您可能需要重新考虑您的设计如何工作。任何用户都可以将 textarea { resize: both !important; }添加到用户样式表中，以覆盖您的首选项。

第五种方案

<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

第六种方案

如果你需要深入的支持，你可以使用旧的学校技术

textarea {
    max-width:/*desired fixed width*/ px;
    min-width:/*desired fixed width*/ px;
    min-height:/*desired fixed height*/ px;
    max-height:/*desired fixed height*/ px;
}

第七种方案

这可以在 HTML 中做到容易

<textarea name="textinput" draggable="false"></textarea>

这对我有用默认值为 true，适用于 draggable 属性。

参考文献

How to disable resizable property of textarea?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何禁用 textarea 的可调整大小的属性？