一、用处

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拖拽控制的更多相关文章

  1. 禁止多行文本框textarea拖拽

    禁止多行文本框textarea拖拽: textarea { resize: none; } resize这个是用于元素缩放,它可以取以下几个值: none 默认值 both 允许水平方向及垂直方向缩放 ...

  2. FMX ScrollBox 拖拽控制

    Firemonkey下的ScrollBox 拖拽控制,滚动控制,拖拽,滚动条 AniCalculations 仅允许纵向拖拽,拖拽 scrlbx.AniCalculations.TouchTracki ...

  3. Blend Grid行列拖拽控制宽高

    原文:Blend Grid行列拖拽控制宽高 看效果 <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width=&qu ...

  4. Android4.0 Launcher拖拽原理分析

    在Android4.0源码自带的Launcher中,拖拽是由DragController进行控制的. 1) 先来看看类之间的继承关系 2)再来看看Launcher拖拽流程的时序图   1.基本流程: ...

  5. CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能

    本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能.类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法. 将两张图片叠加在一 ...

  6. 如何让textarea不可拖拽

    文本域textarea有一个特性,就是可以拖拽改变其大小,但是在布局严格要求的页面中,这种特性显然会影响布局. 一行代码就可以搞定: textarea{ resize:none;} 但是在chrome ...

  7. nw.js FrameLess Window下的窗口拖拽与窗口大小控制

    nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...

  8. textarea的拖拽怎么解决

    textarea文本域在页面中是可以拖动的,即时你给了固定的宽度和高度,但这在我们页面布局中,使我们不需要的,因为可拖拽很多时候会影响我们页面的布局和整体的美观度. css3提供了一个resize属性 ...

  9. JQUERY 拖拽 draggable droppable resizable selectable sortable

    今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下:   <script language="JavaScript" type="text/ ...

随机推荐

  1. c++ 多态,虚函数、重载函数、模版函数

    c++三大特性:封装.继承.多态.封装使代码模块化,继承扩展已存在的代码,多态的目的是为了接口重用 虚函数实现:虚函数表:指针放到虚函数表 多态:同名函数对应到不同的实现 构造父类指针指向子类的对象 ...

  2. java final使用

    一:final 1:有时候 我们需要一些类,不要被继承.即阻止定义子类.不允许扩展的类叫做final类,如果一个类在定义的时候,用final定义的时候,表示这个类是final类.无法定义子类. 语法 ...

  3. java基础二 java的跨平台特性

    一:java跨平台的特性: 1.生成不平台无关系的字节码. 2.通过和平台有关的jvm即java虚拟机来执行字节码.jvm不跨平台. 图示: 疑问:1.为什么我们不直接写字节码? 因为字节码只有jvm ...

  4. P1446 [HNOI2008]Cards

    题目描述 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很快就给出了答案. 进一步,小春要求染出Sr张红色,Sb张蓝 ...

  5. Xilinx实习一年总结

    从去年7月4号来到上海xilinx.转眼间已经一年.这一年学了非常多知识,也长了非常多见识. 去年七月一到公司,马上投入到摄像头-DDR-HDMI图像通路的研发中.就是在ZEDboard板卡上.通过外 ...

  6. jQuery----获取兄弟元素的方法

    ① $(this).next():        获取的是当前元素的下一个兄弟元素 ②$(this).nextAll();       获取的是当前元素的后面的所有的兄弟元素 ③$(this).pre ...

  7. 关于安装时无法重启rabbitmq服务

    如图重启时找不到rabbitmq, 解决办法: rabbitmqctl stop :停止rabbitmq  rabbitmq-server restart : 重启rabbitmq 这两步就可以完成重 ...

  8. C 语言数组越界导致死循环问题

    今天朋友问我一道 C 语言的题目,如下图: 看到这题一开始也比较纳闷,arr[10] 不是越界了吗?怎么会死循环?怎么 arr[10] 就是 m?这是什么意思? 我们先来看一个简单的例子: ]; ; ...

  9. Scala集合学习总结

    遍历集合可以使用迭代器iterator的那套迭代方式.Seq是一个有先后次序的序列,比如数组或列表.IndexedSeq可以通过下标进行任意元素的访问.例如ArrrayBuffer. Set是一组没有 ...

  10. 2017-2018-1 20155231 课堂测试 (ch06)

    2017-2018-1 20155231 课堂测试 (ch06) 1 (单选题|1分) 下面代码中,对数组x填充后,采用直接映射高速缓存,所有对x和y引用的命中率为(D) A .1 B .1/4 C ...