textarea拖拽控制
一、用处
textarea默认时允许用户以拖拽形式来改变textarea大小,但textarea的大小变化会撑大其父节点,有时会破坏整体布局,有时我们并不希望textarea随意拖拽。
二、原因
通过调用 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拖拽控制的更多相关文章
- 禁止多行文本框textarea拖拽
禁止多行文本框textarea拖拽: textarea { resize: none; } resize这个是用于元素缩放,它可以取以下几个值: none 默认值 both 允许水平方向及垂直方向缩放 ...
- FMX ScrollBox 拖拽控制
Firemonkey下的ScrollBox 拖拽控制,滚动控制,拖拽,滚动条 AniCalculations 仅允许纵向拖拽,拖拽 scrlbx.AniCalculations.TouchTracki ...
- Blend Grid行列拖拽控制宽高
原文:Blend Grid行列拖拽控制宽高 看效果 <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width=&qu ...
- Android4.0 Launcher拖拽原理分析
在Android4.0源码自带的Launcher中,拖拽是由DragController进行控制的. 1) 先来看看类之间的继承关系 2)再来看看Launcher拖拽流程的时序图 1.基本流程: ...
- CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能
本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能.类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法. 将两张图片叠加在一 ...
- 如何让textarea不可拖拽
文本域textarea有一个特性,就是可以拖拽改变其大小,但是在布局严格要求的页面中,这种特性显然会影响布局. 一行代码就可以搞定: textarea{ resize:none;} 但是在chrome ...
- nw.js FrameLess Window下的窗口拖拽与窗口大小控制
nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...
- textarea的拖拽怎么解决
textarea文本域在页面中是可以拖动的,即时你给了固定的宽度和高度,但这在我们页面布局中,使我们不需要的,因为可拖拽很多时候会影响我们页面的布局和整体的美观度. css3提供了一个resize属性 ...
- JQUERY 拖拽 draggable droppable resizable selectable sortable
今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下: <script language="JavaScript" type="text/ ...
随机推荐
- jmeter验证WEB页面的href链接请求
1. 第一步: 创建Samper_HTTP请求,打开测试页面 2. 第二步: 创建后置处理器_正则表达式(也有其他方式,这里仅介绍正则) 如图 3. 第三步 创建逻辑控制器_ForEach控制器,配置 ...
- kendo ui - DropDownList 下拉列表系列
kendo-ui 官网:https://www.telerik.com/documentation 初始化 grid: 引入文件: <link rel="stylesheet" ...
- 关于mvn install命令执行报错问题
首先这个报错,通常要么是依赖问题,比如模块之间的依赖传递问题,通常报这种错误会在控制台提示. 或者是比如子工程分为test-entity.test-dao.test-service.test-web三 ...
- $2018/8/19 = Day5$学习笔记 + 杂题整理
\(\mathcal{Morning}\) \(Task \ \ 1\) 容斥原理 大概这玩意儿就是来用交集大小求并集大小或者用并集大小求交集大小的\(2333\)? 那窝萌思考已知\(A_1,A_2 ...
- git更新远程仓库报错
hint: Updates were rejected because the tip of your current branch is behind hint: its remote counte ...
- react fake double , bind click and dblclick on the same element
smartClick:function(id,name,waiter,e){ var desk = $$(e.currentTarget).data('raw'); if(this.lastClick ...
- 2017-2018-2 《网络对抗技术》 20155322 Exp3 免杀原理与实践
#2017-2018-2 <网络对抗技术> 20155322 Exp3 免杀原理与实践 [-= 博客目录 =-] 1-实践目标 1.1-实践介绍 1.2-实践内容 1.3-实践要求 2-实 ...
- VS2013在Windows7 64位上变慢的解决方法
重装了windows7系统,又重装了vs2013,发现在打开vs2013.编译工程及调试的时候,vs2013都会变的比较慢,参考网上资料,这里列出几种可能的解决方法: 1. 打开工具--&g ...
- [glog]_[C/C++]_[使用glog来记录日志]
glog 快速使用教程 场景 1.大部分程序由函数组成, 每个函数执行一段设计好的逻辑, 但是大部分的时候有可能出现意料之外的值, 这时候就很想知道这种意料以外的值是如何产生的, 这就需要一个函数调用 ...
- bootstrap图标显示为方框的解决方案
这是因为没有 fonts 库导致的,只需要放入项目目录即可正常显示图标