如何禁用 textarea 的 resizable 属性?

我想禁用textarea的 resizable 属性。

目前,我可以调整一个textarea通过点击的右下角textarea并拖动鼠标。如何禁用此功能?

在此处输入图片说明

答案

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

textarea {
  resize: none;
}

要针对某些(但不是全部) textarea禁用它,有两个选项

要禁用将name属性设置为foo的特定textarea (即<textarea name="foo"></textarea> ):

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

或者,使用id属性(即<textarea id="foo"></textarea> ):

#foo {
  resize: none;
}

W3C 页面列出了可能的大小调整限制值:无,水平,垂直和继承都没有:

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

查看良好的兼容性页面,以了解当前哪些浏览器支持此功能。正如 Jon Hulka 所说,可以在 CSS 中使用 max-width,max-height,min-width 和 min-height 进一步限制尺寸。

要知道的超级重要:

除非 overflow 属性是可见的以外的其他属性,否则此属性将不执行任何操作。因此,通常要使用此功能,您必须设置类似 overflow 的内容:

克里斯 · 科耶尔(Chris Coyier)的报价, http: //css-tricks.com/almanac/properties/r/resize/

在 CSS 中...

textarea {
    resize: none;
}

我发现了两件事:

第一

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>

一些浏览器

  • Internet Explorer 8

在此处输入图片说明

  • Firefox 17.0.1

在此处输入图片说明

在此处输入图片说明

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

textarea { resize: none; }

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

就个人而言,我发现在 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>

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

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

resize: none;
  • 您可以将其用作内联样式属性,如下所示:

    <textarea style="resize: none;"></textarea>
  • 或在<style>...</style>元素标签之间,如下所示:

    textarea {
        resize: none;
    }

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

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

注意: resize 属性适用于其计算的溢出值不是 “visible” 的元素。

目前,Internet Explorer 中还不支持调整大小

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

不调整大小:

textarea {
  resize: none;
}

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

textarea {
  resize: both;
}

垂直调整大小:

textarea {
  resize: vertical;
}

水平调整大小:

textarea {
  resize: horizontal;
}

另外,如果 CSS 或 HTML 中具有widthheight ,则可以通过更广泛的浏览器支持来防止调整 textarea 的大小。

CSS 3 可以解决此问题。不幸的是,目前只有60%的二手浏览器支持它。

对于 Internet Explorer 和 iOS,您无法关闭大小调整功能,但是可以通过设置textareawidthheight来限制其width

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

观看演示