html-边框不允许拖拽,如何控制 textarea 的边框只能左右拖动、上下拖动或不能拖动...

默认情况下，html 的 textarea 标签多行文本框的右边框和下边框，均可以自由的拖动。

有些场景下，我们需要控制 textarea 的宽度保持不变或高度保持不变或宽高均保持不变。

下面就通过 CSS 样式的 resize 属性 来控制 textarea 边框的拖动状态。

resize 属性值：

vertical 表示可以调整元素的高度

horizontal 表示可以调整元素的宽度

none 表示不允许调整宽高

以设置默认宽度 210px，高度 50px 为例。

1、右边框和下边框，可以自由拖动

代码如下：右边框和下边框，可以自由拖动

如图所示：

2、下边框，可以自由拖动

关键代码：resize:vertical; 代码如下：下边框，可以自由拖动

3、右边框，可以自由拖动

关键代码：resize:horizontal; 代码如下：右边框，可以自由拖动

4、右边框和下边框，均不可拖动

关键代码：resize:none; 代码如下：右边框和下边框，均不可拖动