一尘不染

如何禁用 textarea 的 resizable 属性?

javascript

我想禁用 a 的 resizable 属性textarea

目前,我可以textarea通过单击右下角textarea并拖动鼠标来调整 a 的大小。我怎样才能禁用它?

在此处输入图像描述


阅读 162

收藏
2022-01-23

共1个答案

一尘不染

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

textarea {
  resize: none;
}

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

您可以class在标签(<textarea class="textarea1">)中使用属性:

.textarea1 {
  resize: none;
}

要禁用属性设置为(即, )textarea的特定:name``foo``<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进一步限制尺寸。

超级重要的要知道:

这个属性什么都不做,除非溢出属性不是可见的,这是大多数元素的默认值。所以通常要使用它,你必须设置像溢出一样的东西:滚动;

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

2022-01-23