一、用处

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. JS 兼容大全

    //获取浏览器可视区宽度 function getWidth() { if (window.innerWidth){ return window.innerWidth; } else{ if (doc ...

  2. saltstack之sls文件配置

    state模块 state模块会调用它的sls函数处理一个以.sls结尾的配置文件. sls文件是YAML语言来进行描述的 缩进 不要使用`tab`因为tab是四个空格,而YAML是使用两个空格 冒号 ...

  3. 关于2.4G芯片中 CC2500的相关资料

    CC2500芯片,是TI(原Chipcon被TI收购)推出的一款超低功耗.低成本的无线收发模块,其载频范围在2.400GHz-2.483GHz内可调,可用来实现多信道通信.它支持多种调制方式,包括FS ...

  4. centos7下部署iptables环境纪录(关闭默认的firewalle)(转)

    下面介绍centos7关闭firewall安装iptables,并且开启80端口.3306端口的操作记录:[root@localhost ~]# cat /etc/redhat-release Cen ...

  5. 学习java前端 两种form表单提交方式

    第一种:原生方式 注意点:button标签的style为submit <form action="/trans/doTrans.do" method="post&q ...

  6. dpkg安装失败解决过程

      终于好了.搞到转钟3点都没搞定,耽误不少时间. 执行sudo port install dpkg 报错如下Error: org.macports.build for port gmp return ...

  7. Repository与Factory关系

    Factory负责处理生命周期的开始,而Repository帮助管理生命周期的中间和结束. 通俗的来说,Factory用于创建一个对象的新的实例,而Repository用于从数据库中查找数据.

  8. 大数据入门第二天——基础部分之zookeeper(上)

    一.概述 1.是什么? 根据凡技术必登其官网的原则,我们先去官网瞅一瞅:http://zookeeper.apache.org/ Apache ZooKeeper is an effort to de ...

  9. Java基础—IO小结(一)概述与节点流

    一.File类的使用  由于file类是一个基础类,所以我们从file类开始了解.(SE有完善的中文文档,建议阅读) 构造器: 常用方法:——完整方法请参见API API API!!! File做的是 ...

  10. 20155220 吴思其 《网络攻防》 Exp1 PC平台逆向破解(5)M

    20155220 <网络攻防> Exp1 PC平台逆向破解(5)M 实践内容 通过对实践对象--20155220pwn1的linux可执行文件的修改或输入,完成以下三块: 手工修改可执行文 ...