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/ ...
随机推荐
- java 学习 命令行运行java程序
之前学习python,由于公司需要.现在不得已转java. 1.命令运行java程序. 程序名字:input.java code: /** * Created by liumeide on 2017/ ...
- 网络编程之OSI七层协议
七层协议: 应用层 表示层 会话层 传输层 网络层 数据连接层 物理连接层 1.物理连接层: 实现计算机之间物理连接,传输的数据都是010101的二进制 电信号工作原理:电只有高低电频 2.数据链路层 ...
- Python学习笔记系列——高阶函数(map/reduce)
一.map #变量可以指向函数,函数的参数能接受变量,那么一个函数就可以接受另一个函数作为参数,这种函数被称之为高阶函数 def add(x,y,f): return f(x)+f(y) print( ...
- 从CMDB查询云平台组件或者IP简单脚本
#!/bin/bash#author xiaoweige#todo: ip -- > ingredient or ingredient -- > ip #todo: get the ip ...
- 展开label,利用YYText实现文字显示不完末尾添加全文
效果图: 操作 先github下载<YYText>文件导入, 代码如下: #import "ViewController.h" #import "YYLabe ...
- JavaWeb基础—CSS学习小结
重点记忆:四种结合方式 三种基本选择器 1.CSS:层叠样式表 相当于皮肤 提高了可维护性.样式与内容分离(注释格式/* */) 2.CSS与HTML结合的四种方式:内联式.嵌入式.外部式 1.每个 ...
- ubuntu 装 mysql
sudo apt-get install mysql-server mysql-client
- Circuit Breaker模式
Circuit Breaker模式会处理一些需要一定时间来重连远程服务和远端资源的错误.该模式可以提高一个应用的稳定性和弹性. 问题 在类似于云的分布式环境中,当一个应用需要执行一些访问远程资源或者是 ...
- Node.js 从入门到茫然系列——入门篇
在创建服务的时候,我们一般代码就是: var http = require("http"); var server = http.createServer(function(req ...
- DELL R710使用4T硬盘亮黄灯
事件背景 公司DELL R710的物理机上面运行的SQL SERVER数据库,因存储空间不足需要扩充空间.现系统盘(300G SAS 6Gbps 15K*2)RAID 1,数据盘(500G SAS 6 ...