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/ ...
随机推荐
- SVN 客户端使用
一.TortoiseSVN基本设置 1.1 客户端设置 1.1 语言设置 二.基本操作 2.1 浏览服务器 用户名跟密码,跟公司配置管理员人员获取,没有专门的 ...
- Kafka设计解析(六)Kafka高性能架构之道
转载自 技术世界,原文链接 Kafka设计解析(六)- Kafka高性能架构之道 本文从宏观架构层面和微观实现层面分析了Kafka如何实现高性能.包含Kafka如何利用Partition实现并行处理和 ...
- 浅谈基于FormsAuthentication的认证
一般情况下,在我们做访问权限管理的时候,会把用户的正确登录后的基本信息保存在Session中,以后用户每次请求页面或接口数据的时候,拿到 Session中存储的用户基本信息,查看比较他有没有登录和能否 ...
- ABAP-DBC录屏
*&---------------------------------------------------------------------**& ZXXL_MM02_01*& ...
- 用NI的数据采集卡实现简单电子测试之6——数字I/O及测试平台
本文从本人的163博客搬迁至此. 前面几个例子介绍了NI数据采集卡的模拟输入和输出功能,本例则集中介绍USB-6009的数字输入输出功能.本例包括基本数字IO电路及在LabVIEW中控制USB-600 ...
- git更新远程仓库报错
hint: Updates were rejected because the tip of your current branch is behind hint: its remote counte ...
- 2017-2018-2 20155327『网络对抗技术』Exp5:MSF基础应用
2017-2018-2 20155327『网络对抗技术』Exp5:MSF基础应用 基础问题回答 用自己的话解释什么是exploit,payload,encode exploit:使用者利用漏洞进行攻击 ...
- ~ManancherQwQ
例题传送门 好久没写博客了,写一发. 之前学的Manacher算法拿到模板题找到那最后一个点的错误了,TMD没开long long. Manachar算法主要是处理字符串中关于回文串的问题的,它可以在 ...
- 简单的贝叶斯分类器的python实现
# -*- coding: utf-8 -*- ''' >>> c = Classy() >>> c.train(['cpu', 'RAM', 'ALU', 'io ...
- 将properties文件的配置设置为整个Web应用的全局变量。
四种作用域: Web应用中的变量存放在不同的jsp对象中,会有不一样的作用域,四种不同的作用域排序是 pageContext < request < session < applic ...