我想禁用文本区域的可调整大小属性。

目前,我可以通过单击文本区域的右下角并拖动鼠标来调整文本区域的大小。如何禁用此功能?


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

textarea {
  resize: none;
}

要禁用某些(但不是所有)文本区域,有几个选项。

您可以在标记中使用class属性(<textarea class=“textarea1”>):

.textarea1 {
  resize: none;
}

要禁用名称属性设置为foo的特定文本区域(即<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中可以使用最大宽度、最大高度、最小宽度和最小高度来进一步限制尺寸。

非常重要的是要知道:此属性不起作用,除非溢出属性不是可见的,这是大多数元素的默认值。因此,一般来说,要使用此选项,必须设置溢出:滚动;引自Sara Cope,http://css-tricks.com/almanac/properties/r/resize/


在CSS中。。。

textarea {
    resize: none;
}

CSS3为UI元素提供了一个新属性,允许您执行此操作。该属性是resize属性。因此,您可以将以下内容添加到样式表中,以禁用所有文本区域元素的大小调整:

textarea { resize: none; }

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

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


我发现了两件事:

第一

textarea{resize: none}

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

另一个格式特性是溢出:考虑到dir属性,自动删除右滚动条。

代码和不同的浏览器

基本HTML

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

某些浏览器

Internet Explorer 8

Firefox 17.0.1


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

正在添加!重要的使其发挥作用:

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

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


如果你需要深度支持,你可以使用一种老式的技巧:

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。


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

对于Internet Explorer和iOS,您不能关闭调整大小,但可以通过设置文本区域的宽度和高度来限制文本区域的大小。

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

参见演示


要禁用resize属性,请使用以下CSS属性:

resize: none;

您可以将其应用为内联样式属性,如下所示:<textarea style=“resize:none;”></textarea>或介于<style>之间</style>元素标记如下:文本区域{调整大小:无;}


要禁用所有文本区域的大小调整,请执行以下操作:

textarea {
    resize: none;
}

要禁用特定文本区域的大小调整,请添加属性、名称或id并将其设置为某个值。在本例中,它被命名为noresize

HTML

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

CSS

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

#noresize {
    resize: none;
}

您也可以尝试使用jQuery

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

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

resize属性指定元素是否可调整大小由用户执行。注意:resize属性适用于计算溢出的元素价值不是“可见”。

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

以下是用于调整大小的不同财产:

不调整大小:

textarea {
  resize: none;
}

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

textarea {
  resize: both;
}

垂直调整大小:

textarea {
  resize: vertical;
}

水平调整大小:

textarea {
  resize: horizontal;
}

此外,如果您的CSS或HTML中有宽度和高度,它将阻止您的文本区域被调整大小,并提供更广泛的浏览器支持。


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

textarea {
    resize: none;
}

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

resize: vertical;

or

resize: horizontal;

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

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

我创建了一个小演示来演示如何调整财产的大小。我希望这对你和其他人也有帮助。

.可调整大小{调整大小:两者;}.no可调整大小{调整大小:无;}.lesizeable_V{调整大小:垂直;}可调整大小_H{调整大小:水平;}<textarea class=“resizeable”rows=“5”cols=“20”name=“resizeble”title=“这是可调整大小的。”>这是可调整大小的。Lorem ipsum,或有时被称为lipsum,是用于布局印刷、图形或网页设计的虚拟文本。这段文字是由15世纪的一位不知名的排字师所写,据信他将西塞罗的《德菲尼布斯·博诺伦和马洛伦》的部分拼成了一本铅字样本书。</text区域><textarea class=“noResizeable”rows=“5”title=“这将不可调整大小。”cols=“20”name=“resizeable”>这将不可调整大小。Lorem ipsum,或有时被称为lipsum,是用于布局印刷、图形或网页设计的虚拟文本。这段文字是由15世纪的一位不知名的排字师所写,据信他将西塞罗的《德菲尼布斯·博诺伦和马洛伦》的部分拼成了一本铅字样本书。</text区域><textarea class=“resizeable_V”title=“这是可垂直调整大小的。”rows=“5”cols=“20”name=“resizeable”>这是可垂直调整大小的。Lorem ipsum,或有时被称为lipsum,是用于布局印刷、图形或网页设计的虚拟文本。这段文字是由15世纪的一位不知名的排字师所写,据信他将西塞罗的《德菲尼布斯·博诺伦和马洛伦》的部分拼成了一本铅字样本书。</text区域><textarea class=“resizeable_H”title=“这是可水平调整大小的。”rows=“5”cols=“20”name=“resizeable”>这是可水平调整大小的。Lorem ipsum,或有时被称为lipsum,是用于布局印刷、图形或网页设计的虚拟文本。这段文字是由15世纪的一位不知名的排字师所写,据信他将西塞罗的《德菲尼布斯·博诺伦和马洛伦》的部分拼成了一本铅字样本书。</text区域>


textarea {
  resize: none;
}

上面的代码将禁用项目中所有<textarea/>元素的可调整大小属性。如果您希望这样做很好,否则您将希望为textarea元素使用特定的类。

.not-resizable {
   resize: none;
}

在HTML中

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

使用此属性调整大小:无;

textarea {
  resize: none;
}

您需要在component.CSS中设置以下CSS代码

textarea {
    resize: none;
}