首页 > 代码库 > textarea拖拽控制

textarea拖拽控制

一、用处

textarea默认时允许用户以拖拽形式来改变textarea大小,但textarea的大小变化会撑大其父节点,有时会破坏整体布局,有时我们并不希望textarea随意拖拽。

 forklift

二、原因

通过调用 window.getComputedStyle(textarea元素, null).resize 返回both,我们可以知道原来是resize样式属性默认为both(可调整尺寸)。

 

三、resize参数

用于设置UserAgent调整元素尺寸的机制,就是说设置用户能否和如何自行改变元素尺寸。

值范围

none:不允许UserAgent调整元素尺寸;

both :允许UserAgent调整元素水平、垂直方向的尺寸;

vertical:允许UserAgent调整元素垂直方向的尺寸;

horizontal:允许UserAgent调整元素水平方向的尺寸;

inherit :继承父元素

 

破坏布局原因:

对于div来说resize属性值时inherit(其实就是none),而对于textarea而言默认值为both。

 

四、方法  

为textarea设置  resize:none|both|vertical|horizontal

 我们可根据实际需求调整textarea的拖拽方式,解决拖拽对整体布局的影响。

textarea拖拽控制