textarea只允许上下调节尺寸
对于extarea,因为如果不做限制的话,它是可以自由调节尺寸的,对于这一点我相信用户是非常喜欢的,因为每个人都有自己认为合适的尺寸,但是对于前端来说就比较头疼了,因为随意调节宽高,就会破坏整体布局,
所以以前一直都是在css,加上一句resize:none,比如像合作意向描述那个框。

但是这样做虽然可以达到页面的绝对控制,但是却失去了设计textarea的初衷,对于如今的pc或移动端(已经占据了80%以上流量入口),我们一般不是担心高度的调节,而是宽度!
所以我们给他一个绝对或相对宽度,而用户只能调节高度(这也是一般用户的需求)
解决方法:
在textarea css中加入min-width:90%(加入你自己的高度), max-width:90%(与前一个高度保持一致),如图:只能上下进行拖动

优点:
1. 不影响原有布局
2. 增加用户体验。
textarea只允许上下调节尺寸的更多相关文章
- Android系统定制之SystemUI修改:下拉通知栏尺寸【转】
本文转载自:https://blog.csdn.net/huil0925/article/details/67632358 最近项目需要修改下拉通知栏面板的宽度,完成后,写个Blog做个总结,也提供给 ...
- 创建支持多种屏幕尺寸的Android应用
Android涉及各种各样的支持不同屏幕尺寸和密度的设备.对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的用户界面到它显示的屏上.与此同时,系统提供 ...
- 创办支持多种屏幕尺寸的Android应用
创建支持多种屏幕尺寸的Android应用 Android涉及各种各样的支持不同屏幕尺寸和密度的设备.对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的 ...
- Cocos2d-x使用android拍照功能加载照片内存过大,通过另存照片尺寸大小解决
使用2dx调用android拍照功能,拍照结束后在2dx界面显示拍照照片,如果不对照片做处理,会出现内存过大的问题,导致程序崩溃,如果仅仅另存拍照照片,则照片质量大小均下降,导致照片不够清晰,后来发现 ...
- textarea的中文输入判断与搜狗输入法的特殊行为
虽然要讲解的知识点是通用的,但是还是要介绍下我的应用场景和测试环境. 0.1 应用场景和测试环境 我的应用是一块使用Html Canvas开发的黑板,在黑板上实现简单的文字编辑功能. 操作系统:win ...
- 【BootStrap】 概述 & CSS
BootStrap BootStrap由Twitter开发,基于HTML,CSS,JS,是一套前端框架.它的特点是对浏览器良好的支持(目前市面上所有流行浏览器都可以),兼容移动设备,以及响应式设计(响 ...
- 技巧JS
1. document.referrer可以获得上一页的地址,使用document.anchors获得页面上面所有的链接元素,而不必使用document.getElementsByTagNam ...
- css的margin
1.适合于没有设定width/height的普通block水平元素 2.只适用于水平方向尺寸 例子:一侧定宽的自适应布局 <html> <head> <meta name ...
- lhgDialog窗口组件
应用到你的项目 在页面head引入lhgdialog(如果项目采用jQuery作为框架,则引用jQuery的库). <script type="text/javascript" ...
随机推荐
- JavaScript return 最简单解释
一.return 返回值 1)函数名字 +括号 :fun() ==> retrun 后面的值 2)所以函数的模范返回值是为未定义 3)return; 后面的任何代码都不会执行了 二.arguem ...
- There were X failed login attempts since the last successful login
如题,开始玩Linux的人,每次登陆的时候,肯定会遇到这个提示,好担心系统被人攻破,那怎么把这些试探的IP抓出来,并屏蔽呢,今天就记录一下我的做法,供大家参考 其实这个问题已经在系统级别支持解决,目前 ...
- Web应用基础
B-S架构 架构的发展 1,c/s架构 (client客户端-server服务端) (胖客户端:要求客户端运行业务:把业务放到服务器端,则是瘦客户端) 典型的c/s应用 ...
- POI--HSSFSheet类
用POI来作成一个Sheet,可以用「HSSFSheet」类,该类构造器如下: 新建Sheet 从构造器可以看出,虽然它有两个构建器,但都是protected的,所以要新建Sheet,只能通过Work ...
- 20165220 学习基础和C语言基础调查
# # # # 我觉得我打游戏(不知道算不算一技之长)毕竟从小学一年级就接触到了各种形形色色的游戏,讲道理其实我的游戏天赋毕竟还是很大的,从意识到感觉我觉得都比大多数人好一些,其实吧打游戏打得好也是很 ...
- PHP的CI框架流程基本熟悉
CI框架是PHP的一个快速开发框架,我是目前的公司项目后台语言用的PHP,因为我做前端开发,需要用php去填充页面数据,所以就开始去了解这个框架,学习了一些php和数据库的东西,这篇文章先具体介绍CI ...
- java面向对象基础(二)
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- js中的监听事件总结
javascript事件与功能说明大全:http://tools.jb51.net/table/javascript_event 1.滚动条监听事件 例1:监听滚动条距离页面顶端距离 <scri ...
- 【转】sed命令n,N,d,D,p,P,h,H,g,G,x解析
1. sed执行模板=sed '模式{命令1;命令2}' 即逐行读入模式空间,执行命令,最后输出打印出来 2. 为方便下面,先说下p和P,p打印当前模式空间内容,追加到默认输出之后,P打印当前模式空间 ...
- php之快速排序
<?phpfunction shell_sort(array $arr){ $right=$left = array(); $Rights=$Lefts = array() ...