一、用处

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. KMP算法用JavaScript实现

    KMP算法是字符串匹配的经典算法,简称 看毛片, 理论知识请直接看阮一峰老师的这篇文章,我看完文章之后尝试对算法进行了实现. 一句话总结KMP算法的核心思想:就是跳过已经对比的部分 而KMP算法的核心 ...

  2. JDBC 使用common-dbutiles

    一:第三方jar mysql-connector-java-5.1.45-bin.jar,需要关注的核心类: 1.DbUtils----操作数据库的连接注册和释放. 2:.QueryRunner--- ...

  3. PAT乙级1029

    1029 旧键盘 (20 分)   旧键盘上坏了几个键,于是在敲一段文字的时候,对应的字符就不会出现.现在给出应该输入的一段文字.以及实际被输入的文字,请你列出肯定坏掉的那些键. 输入格式: 输入在 ...

  4. 项目部署到weblogic后页面乱码问题

    问题描述: windows环境下,将项目部署到weblogic运行startWebLogic.cmd启动weblogic后,浏览器访问页面乱码问题,在Tomcat不会乱码. 请不要看着博文就直接改了, ...

  5. cleanCode[2]:函数编写的几大规则

    函数编写的几大规则 很难一开始就遵循这些规则,但是可以先想什么就写什么,然后再打磨它. 1.短小 函数的第一规则是短小,第二规则是还要更短小. if.else.while语句等,其中的代码块应该只有一 ...

  6. Oracle 循环插入测试数据(网上收集整理)

    一 Oracle 循环插入测试数据 declare          maxrecords constant int:=1000;          i int :=1; begin for i in ...

  7. TMS320VC5509串口通信

    1. 串口通信使用MCBSP外设的DX1,DRA引脚 很多同学喜欢把这个MCBSP驱动音频芯片TLV320AIC23,同时也作为串口,那么一般用的拨码开关去选择,反正自己看着拨一下 2. 遇到的一个问 ...

  8. IDEA 出现 updating indices 卡进度条问题的解决方案并加快索引速度

    缺点: 这样的话,前端的接口(也就是字符串)就搜索不到了. C:\Users\Administrator\.IntelliJIdea2017.3\system  删除里面的caches文件夹(这里的 ...

  9. 十一、Django认证模块--Auth模块

    一.常规认证方法 我们学生管理之登录实现一文中已经了解了自己写一个登录逻辑的过程: 1.url配置 urlpatterns = [ url(r'^login/$', views.login), url ...

  10. Object Relational Mapping框架之Hibernate

    hibernate框架简介: hibernate框架就是开发中在持久层中应用居多的ORM框架,它对JDBC做了轻量级的封装. (百度介绍,感觉不错) 什么是ORM:Object Relational ...