关于html：如何禁用textarea的可调整大小的属性？


How to disable resizable property of textarea?

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

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

enter image description here

相关讨论

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

1
2
3
textarea {
  resize: none;
}

要为某些(但不是全部)textarea禁用它，有几个选项。

在name属性设置为foo的情况下(即禁用特定的textarea：

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

或者，使用id属性(即属性)：

1
2
3
#foo {
  resize: none;
}

W3C页列出了调整大小限制的可能值：无、同时、水平、垂直和继承：

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

查看合适的兼容性页面，查看当前哪些浏览器支持此功能。正如乔恩·胡尔卡(JonHulka)所评论的，在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,

resize

相关讨论

在CSS中…

4

相关讨论

我发现了两件事

第一

1
textarea{resize:none}

这是CSS3，尚未发布，但与FireFox4+Chrome和Safari兼容。

另一个格式特性是溢出：自动去掉右滚动条，同时考虑dir属性

代码和不同的浏览器

基本HTML

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

一些浏览器

  • IE8

enter image description here

  • FF1.0.1

enter image description here

  • 铬

enter image description here

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

1
textarea { resize: none; }

这是CSS3属性；使用兼容性图表查看浏览器兼容性。

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

相关讨论

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

如果你需要深层次的支持，你可以使用传统的技术。

1
2
3
4
5
6
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轻松完成

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

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

相关讨论

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

The resize property 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".

同时，在IE中不支持调整大小。

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

没有调整大小：

1
2
3
textarea {
  resize: none;
}

双向调整大小(垂直和水平)：

1
2
3
textarea {
  resize: both;
}

垂直调整大小：

1
2
3
textarea {
  resize: vertical;
}

水平调整大小：

1
2
3
textarea {
  resize: horizontal;
}

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

要禁用"调整大小"属性，请使用以下CSS属性：

1
resize: none;

  • 您可以将其作为内联样式属性应用，如下所示：

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

  • 或者在

    元素标记之间，比如：

    4

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

1
2
3
textarea{
    resize: none;
}

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

25

或

1
resize: horizontal;

CSS3可以解决这个问题。不幸的是，目前只有60%的浏览器支持它。

对于IE和IOS，您不能关闭调整大小，但可以通过设置其width和height来限制textarea维度。

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

参见演示

使用@style，您可以给它一个自定义大小，并禁用调整大小功能(resize: none;)。

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

试试这个：

1
2
3
#foo {
    resize: none;
}
1
2
3
<textarea rows="4" cols="50" name="foo" id="foo">
Minisoft is the best Website and Software Development company providing various IT services to individual and corporate clients globally. http://minisoft.com.bd
</textarea>

禁用调整所有文本区域的大小

4

禁用特定textarea的调整大小添加属性name或id并将其设置为某个值。在这种情况下，它被命名为noresize。

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

CSS

1
2
3
4
5
6
7
8
9
/*  using the attribute name */
textarea[name=noresize]{
resize: none;
}
/* or using the id */

#noresize{
resize: none;
}

添加！重要的是让它工作：

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

大纲只是为了避免某些浏览器上的蓝色大纲。

相关讨论

您也可以尝试使用jquery

1
$('textarea').css("resize","none");
相关讨论