如何禁用 textarea 的 resizable 属性？-解网

问：

我想禁用 .textarea

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

HTML CSS 文本区域

7赞 random_user_name 11/24/2012

@JDIsaaks - 此外，在某些情况下允许调整大小可能会破坏布局和打印（当前关键任务项目的一个重要方面）。

19赞 neminem 1/22/2015

有时你确实想要一个不可调整大小的文本区域。例如，在这种情况下，当您（有条件地）将文本区域转换为看起来像标签的内容时。有一个带有随机浮动抓取器的标签看起来真的很奇怪。

7赞 superluminary 1/30/2020

出于对所有美好事物的热爱，请不要在实际的文本区域上这样做，否则会疏远您的高级用户。破坏核心浏览器功能应被视为一个核心选项。

答：

4291赞 Donut 3/9/2011 #1

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

textarea {
  resize: none;
}

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

您可以在 tag（）中使用 attribute：class<textarea class="textarea1">

.textarea1 {
  resize: none;
}

要禁用属性设置为（即）：textareanamefoo<textarea name="foo"></textarea>

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

或者，使用属性（即）：id<textarea id="foo"></textarea>

#foo {
  resize: none;
}

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

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

查看一个不错的兼容性页面，看看目前有哪些浏览器支持此功能。正如 Jon Hulka 所评论的，可以在 CSS 中使用 max-width、max-height、min-width 和 min-height 进一步约束尺寸。

超级重要知道：

除非 overflow 属性不是可见属性，否则此属性不执行任何操作，这是大多数元素的默认值。所以一般来说，要使用它，你必须设置类似 overflow： scroll;

引用 Sara Cope，http://css-tricks.com/almanac/properties/r/resize/

1赞 Šime Vidas 3/9/2011

Firefox、Opera 和/或 IE 有解决方案吗？

8赞 Donut 3/9/2011

@Šime IE 和 FF3（及更早版本）不支持调整大小，因此不需要为它们提供解决方案。对于 FF4，此解决方案应该有效。

33赞 Jon Hulka 11/18/2012

根据 davidwalsh.name/textarea-resize - 使用 resize：vertical 或 resize：horizontal 将调整大小限制为一个维度。或者使用 max-width、max-height、min-width 和 min-height 中的任何一个。

6赞 Buksy 8/8/2016

我是唯一一个觉得使用 css 而不是属性设置它很奇怪的人吗？为什么我不能使用 CSS 设置 disabled 或 checked 或其他属性......

9赞 Kroltan 9/8/2016

@Buksy 因为“禁用”是一种状态，而不是视觉属性。因此，它不应该由样式语言来决定是合乎逻辑的。

250赞 Jeff Parker 3/9/2011 #2

在 CSS 中：

textarea {
    resize: none;
}

75赞 James Sumners 3/9/2011 #3

CSS 3 为 UI 元素提供了一个新属性，允许您执行此操作。该属性是 resize 属性。因此，您可以将以下内容添加到样式表中，以禁用所有 textarea 元素的大小调整：

textarea { resize: none; }

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

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

1赞 Radvylf Programs 4/15/2019

但那将是用户故意破坏他们的布局，而不是一个只需要调整他/她的大小并最终使某些东西不起作用的用户texarea

134赞 Rami Jamleh 12/28/2012 #4

我发现了两件事：

第一

textarea{resize: none}

这是一个尚未发布的 CSS 3，与 Firefox 4（及更高版本）、Chrome 和 Safari 兼容。

另一个格式功能是 overflow： auto 去掉右边的滚动条，同时考虑到 dir 属性。

代码和不同的浏览器

基本 HTML

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

某些浏览器

IE浏览器 8

Enter image description here

火狐浏览器 17.0.1

Enter image description here

34赞 Imtiaz Ali Baigal 11/6/2013 #5

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

0赞 kaelds 2/4/2014 #6

添加使其工作：!important

width:325px !important; height:120px !important; outline:none !important;

outline只是为了避免某些浏览器上的蓝色轮廓。

6赞 Raptor 4/5/2016

不要滥用属性。如果CSS属性可以删除调整大小功能，则修复宽度和高度毫无意义!importantresize: none

1赞 Peter Mortensen 9/26/2019

难道不是邪恶吗？!important

0赞 Advait Junnarkar 2/20/2020

在当前的 Chrome 中，这停止了水平调整大小，但我仍然可以垂直调整文本区域的大小。

0赞 EPurpl3 7/8/2020

在极少数情况下，这可能很有用。

27赞 yevgeniy 2/12/2015 #7

如果你需要深度支持，你可以使用一种老式的技术：

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;
    resize: none; /* If you wnt to hide the handle in the lower right corner */;
}

8赞 MacroMan 7/17/2015

此外，使用此解决方案可防止手柄出现在底角，这令人沮丧地不起作用。resize:none

23赞 Thusitha Wickramasinghe 7/21/2015 #8

这可以在 HTML 中轻松完成：

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

这对我有用。默认值用于属性。truedraggable

0赞 Antony D'Andrea 9/8/2015

这是一个 HTML 5 属性，因此只有较新的浏览器才会支持。我在某处读到 IE 从 9 开始支持它。

5赞 Thusitha Wickramasinghe 11/9/2015

这适用于大多数浏览器。在每个最新的浏览器中。

1赞 Volodymyr Myshko 12/28/2016

它不会阻止 TextArea 调整大小

4赞 Advait Junnarkar 2/20/2020

@AntonyD'Andrea 这在最新的 Chrome 上不起作用：jsfiddle.net/ps2v8df9

7赞 Oriol 10/31/2015 #9

CSS 3 可以解决这个问题。不幸的是，现在只有 60% 的二手浏览器支持它。

对于 Internet Explorer 和 iOS，您无法关闭调整大小，但可以通过设置其和来限制维度。textareawidthheight

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

观看演示

10赞 Webeng 6/12/2016 #10

若要禁用 resize 属性，请使用以下 CSS 属性：

resize: none;

您可以将其作为内联样式属性应用，如下所示：
```
<textarea style="resize: none;"></textarea>
```
或在元素标签之间，如下所示：<style>...</style>
```
textarea {
    resize: none;
}
```

7赞 Abk 10/25/2016 #11

要禁用所有 s 的调整大小：textarea

textarea {
    resize: none;
}

要禁用特定的调整大小，请添加属性或并将其设置为某些内容。在本例中，它被命名为textareanameidnoresize

[HTML全文]

<textarea name='noresize' id='noresize'> </textarea>

CSS的

/* Using the attribute name */
textarea[name=noresize] {
    resize: none;
}
/* Or using the id */

#noresize {
    resize: none;
}

1赞 Santosh Khalse 12/15/2016 #12

您也可以尝试使用jQuery

$('textarea').css("resize", "none");

3赞 Filip Savic 6/25/2018

你应该使用更多的jquery。你用得还不够。:)

1赞 Peter Mortensen 9/26/2019

这是一个模因 - 例如，“你应该完全放弃它并尝试jQuery。

17赞 Alireza 6/1/2017 #13

您只需在 CSS 中使用：即可。resize: none;

resize 属性指定元素是否可调整大小由用户。

注意：resize 属性适用于其计算溢出的元素 value 是“可见”以外的东西。

此外，Internet Explorer 目前不支持调整大小。

以下是用于调整大小的不同属性：

无调整大小：

textarea {
  resize: none;
}

以两种方式调整大小（垂直和水平）：

textarea {
  resize: both;
}

垂直调整大小：

textarea {
  resize: vertical;
}

水平调整大小：

textarea {
  resize: horizontal;
}

此外，如果您有 CSS 或 HTML，它将阻止您的文本区域调整大小，并提供更广泛的浏览器支持。widthheight

11赞 user7122338 5/28/2018 #14

您可以像这样简单地禁用 textarea 属性：

textarea {
    resize: none;
}

要禁用垂直或水平调整大小，请使用

resize: vertical;

或

resize: horizontal;

4赞 Carlos de Jesus Baez 8/31/2018 #15

使用，您可以为其指定自定义大小并禁用调整大小功能。@style(resize: none;)

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })

2赞 Baptiste Mille-Mathias 8/31/2018

您好，感谢您的回答，下次请格式化代码。

0赞 yogihosting 12/27/2018

这是 asp.net 基于 MVC 的答案。很好。

6赞 Ambuj Khanna 6/13/2019 #16

我创建了一个小型演示来展示调整属性大小的工作原理。我希望它能对你和其他人有所帮助。

.resizeable {
  resize: both;
}

.noResizeable {
  resize: none;
}

.resizeable_V {
  resize: vertical;
}

.resizeable_H {
  resize: horizontal;
}

<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

8赞 Ismoil Shokirov 7/21/2021 #17

textarea {
  resize: none;
}

上面的代码将禁用项目中所有元素的 resizable 属性。如果你希望这很好，否则你会想对你的textarea元素使用一个特定的类。<textarea/>

.not-resizable {
   resize: none;
}

在 HTML 中

<textarea class="not-resizable"></textarea>

15赞 Priya Maheshwari 8/16/2021 #18

使用此属性resize: none;

textarea {
  resize: none;
}

11赞 Umer Baba 8/6/2022 #19

您需要在component.css

textarea {
    resize: none;
}

8赞 Kabeer 2/10/2023 #20

您可以使用 textarea {resize： none;} 禁用 textarea 的可调整大小属性

textarea {
   resize: none;
}

演示

0赞 eternalchimes 6/2/2023 #21

如果有人正在寻找一种在纯 Javascript 中实现这一目标的方法：

textArea = document.createElement("textarea");
textArea_input.setAttribute("style","resize:none");

注意：以这种方式设置 style 属性将覆盖之前的所有 css 样式声明。

-1赞 Parth Raval 8/29/2023 #22

是的，您可以使用 CSS 禁用 textarea 的 resizable 属性。以下代码将禁用 id 为 text area 的 resizable 属性：my-textarea

CSS代码：-

textarea#my-textarea {
  resize: none;
}

您还可以通过将以下代码添加到 CSS 样式表来禁用页面上所有 resizable 属性：textareas

CSS代码：-

textarea {
  resize: none;
}

该属性可以有三个值：resize

none：无法调整文本区域的大小。
horizontal：文本区域只能水平调整大小。
vertical：文本区域只能垂直调整大小。

该属性的缺省值为。resizenone

除了使用 CSS 之外，您还可以使用 JavaScript 禁用 textarea 的 resizable 属性。以下代码将禁用 id 为 text area 的 resizable 属性：my-textarea

JavaScript代码：-

const textarea = document.getElementById('my-textarea');
textarea.style.resize = 'none';

此代码将覆盖已应用于 textarea 的任何 CSS 样式。

若要减小文本区域的大小，可以在 HTML 代码中使用 and 属性。rows 属性指定 textarea 中的位数，该属性指定列数。例如，以下代码将创建一个包含 10 行和 50 列的 textarea：rowscolsrowscols

HTML代码：-

<textarea rows="10" cols="50"></textarea>

您还可以使用 CSS 来设置文本区域的大小。以下代码将 id 为 100px 和 200px 的 textarea 的高度和宽度分别设置为 100px 和 200px：my-textarea

CSS代码：-

textarea#my-textarea {
  height: 100px;
  width: 200px;
}

上一个：如何使用 JavaScript 更改元素的类？

下一个：如何在 Web 表单字段/输入标签上禁用浏览器自动完成？

如何禁用 textarea 的 resizable 属性？

How do I disable the resizable property of a textarea?

评论

超级重要知道：

评论

评论

代码和不同的浏览器

评论

评论

评论

[HTML全文]

CSS的

评论

评论