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/ ...
随机推荐
- 图片保持比例,padding的妙用
要保持图片的比例不变 这一张图片在不同分辨率(1980px, 1364px,移动端400px)下均保持了一定的比例不变. 方法: padding以及margin的上下(margin-top | mar ...
- java多态成员的特点
父类: package com.company; public class A { ; public void ok(){ System.out.println("i am father!& ...
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- scikit-learn决策树的python实现以及作图
decsion tree(决策树) 其中每个内部结点表示在一个属性上的测试,每个分支代表一个属性的输出,而每个树叶结点代表类或类的分布.树的最顶层是根节点 连续变量要离散化 机器学习中分类方法的一个重 ...
- BFC (Block formatting context)
一:BFC 是什么 MDN解释: A block formatting context is a part of a visual CSS rendering of a Web page. ...
- [原创]升级Gerrit的commit-msg,检查git commit时必须填写开发任务编号TaskID
公司使用git+gerrit+jenkins进行持续集成实践,其中gerrit用来进行Code Review.另外我们自己研发了一套敏捷项目管理系统TPM(TeamPlus Management),用 ...
- 笔记1:MYSQL
(注:第一次写,如有错误之处,希望指出,不胜感激,谢谢,不喜也勿喷) 一.MYSQL简单描述 1.MYSQL是什么? MYSQL是现在最流行的关系型数据库管理系统之一: MYSQL是开源软件: 关系型 ...
- MacOS在Finder中建立快速新建txt的workflow
Mac是不支持右键直接新建txt的,因此有时候需要用到文本文稿的时候会比较麻烦. 因此这里提供一种个人认为比较方便的方法,让Mac也能很简洁的新建txt文件. 工具介绍: Automator ...
- python3通过纯真IP数据库查询IP归属地信息
在网上看到的别人写的python2的代码,修改成了python3. 把纯真IP数据库文件qqwry.dat放到czip.py同一目录下. #! /usr/bin/env python # -*- co ...
- 微信公众号开发被动回复用户消息,回复内容Content使用了"\n"换行符还是没有换行
使用语言和框架:本人后端开发使用的Python的DRF(Django REST framework)框架 需求:在微信公众号开发时,需要实现自动回复,即被关注回复.收到消息回复.关键词回复 发现问题: ...