Html 如何禁用 textarea 的可调整大小的属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5235142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I disable the resizable property of a textarea?
提问by user549757
I want to disable the resizable property of a textarea.
我想禁用 a 的可调整大小的属性textarea。
Currently, I can resize a textareaby clicking on the bottom right corner of the textareaand dragging the mouse. How can I disable this?
目前，我可以textarea通过单击右下角textarea并拖动鼠标来调整 a的大小。我怎样才能禁用它？
回答by Donut
The following CSS rule disables resizing behavior for textareaelements:
以下 CSS 规则禁用textarea元素的大小调整行为：
textarea {
resize: none;
}
To disable it for some (but not all) textareas, there are a couple of options.
要为某些（但不是全部）禁用它textarea，有几个选项。
To disable a specific textareawith the nameattribute set to foo(i.e., <textarea name="foo"></textarea>):
要禁用特定textarea与所述name属性设置为foo（即，<textarea name="foo"></textarea>）：
textarea[name=foo] {
resize: none;
}
Or, using an idattribute (i.e., <textarea id="foo"></textarea>):
或者，使用id属性（即，<textarea id="foo"></textarea>）：
#foo {
resize: none;
}
The W3C pagelists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:
在W3C网页列出了调整限制可能的值：无，两者水平，垂直和继承：
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
Review a decent compatibility pageto see what browsers currently support this feature. As Jon Hulka has commented, the dimensions can be further restrainedin CSS using max-width, max-height, min-width, and min-height.
查看一个不错的兼容性页面以查看当前支持此功能的浏览器。正如 Jon Hulka 所评论的，尺寸可以在 CSS 中使用 max-width、max-height、min-width 和 min-height进一步限制。
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 Sara Cope, http://css-tricks.com/almanac/properties/r/resize/
超级重要的知识：
这个属性什么都不做，除非溢出属性不是可见的，这是大多数元素的默认值。所以通常要使用它，你必须设置像溢出：滚动；
Sara Cope 引述， http://css-tricks.com/almanac/properties/r/resize/
回答by Jeff Parker
In CSS ...
在 CSS ...
textarea {
resize: none;
}
回答by Rami Jamleh
I found two things:
我发现了两件事：
First
第一的
textarea{resize: none}
This is a CSS 3, which is not released yet, compatible with Firefox 4 (and later), Chrome, and Safari.
这是一个尚未发布的 CSS 3，与Firefox 4（及更高版本）、Chrome 和 Safari兼容。
Another format feature is to overflow: autoto get rid of the right scrollbar, taking into account the dirattribute.
另一个格式特性是overflow: auto去掉右边的滚动条，同时考虑到dir属性。
Code and different browsers
代码和不同的浏览器
Basic HTML
基本 HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>
Some browsers
一些浏览器
- Internet Explorer 8
- 浏览器 8
- Firefox 17.0.1
- 火狐 17.0.1
- Chrome
- 铬合金
回答by James Sumners
CSS 3 has a new property for UI elements that will allow you to do this. The property is the resize property. So you would add the following to your stylesheet to disable resizing of all textarea elements:
CSS 3 为 UI 元素提供了一个新属性，允许您执行此操作。该属性是调整大小属性。因此，您可以将以下内容添加到样式表中以禁用所有 textarea 元素的大小调整：
textarea { resize: none; }
This is a CSS 3 property; use a compatibility chartto see browser compatibility.
这是一个 CSS 3 属性；使用兼容性图表查看浏览器兼容性。
Personally, I would find it very annoying to have resizing disabled on textarea elements. This is one of those situations where the designer is trying to "break" the user's client. If your design can't accommodate a larger textarea, you might want to reconsider how your design works. Any user can add textarea { resize: both !important; }to their user stylesheet to override your preference.
就我个人而言，我会发现在 textarea 元素上禁用调整大小非常烦人。这是设计者试图“破坏”用户客户端的情况之一。如果您的设计无法容纳更大的 textarea，您可能需要重新考虑您的设计如何工作。任何用户都可以添加textarea { resize: both !important; }到他们的用户样式表来覆盖您的偏好。
回答by Imtiaz Ali Baigal
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
回答by yevgeniy
If you need deep support, you can use an old school technique:
如果你需要深入的支持，你可以使用一个老派的技巧：
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;
}
回答by Thusitha Wickramasinghe
This can be done in HTML easily:
这可以在 HTML 中轻松完成：
<textarea name="textinput" draggable="false"></textarea>
This works for me. The default value is truefor the draggableattribute.
这对我有用。默认值true用于draggable属性。
回答by Webeng
To disable the resize property, use the following CSS property:
要禁用调整大小属性，请使用以下 CSS 属性：
resize: none;
You can either apply this as an inline style property like so:
<textarea style="resize: none;"></textarea>or in between
<style>...</style>element tags like so:textarea { resize: none; }
您可以将其应用为内联样式属性，如下所示：
<textarea style="resize: none;"></textarea>或在
<style>...</style>元素标签之间，如下所示：textarea { resize: none; }
回答by Alireza
You simply use: resize: none;in your CSS.
您只需resize: none;在 CSS 中使用：。
The resizeproperty specifies whether or not an element is resizable by the user.
Note:The resize property applies to elements whose computed overflow value is something other than "visible".
的调整大小属性指定是否一个元件是由用户调整大小。
注意：resize 属性适用于计算溢出值不是“可见”的元素。
Also resizenot supported in Internet Explorer at the moment.
同时调整大小不是现在在Internet Explorer中的支持。
Here are different properties for resize:
以下是调整大小的不同属性：
No Resize:
不调整大小：
textarea {
resize: none;
}
Resize both ways (vertically & horizontally):
双向调整大小（垂直和水平）：
textarea {
resize: both;
}
Resize vertically:
垂直调整大小：
textarea {
resize: vertical;
}
Resize horizontally:
水平调整大小：
textarea {
resize: horizontal;
}
Also if you have widthand heightin your CSS or HTML, it will prevent your textarea be resized, with a broader browsers support.
此外，如果您在 CSS 或 HTML 中有width和height，它将阻止您的 textarea 调整大小，并提供更广泛的浏览器支持。
回答by Alireza
You can simply disable the textareaproperty like this:
您可以像这样简单地禁用 textarea属性：
textarea {
resize: none;
}
To disable verticalor horizontalresizing, use
要禁用垂直或水平调整大小，请使用
resize: vertical;
or
或者
resize: horizontal;
