对于extarea,因为如果不做限制的话,它是可以自由调节尺寸的,对于这一点我相信用户是非常喜欢的,因为每个人都有自己认为合适的尺寸,但是对于前端来说就比较头疼了,因为随意调节宽高,就会破坏整体布局,

所以以前一直都是在css,加上一句resize:none,比如像合作意向描述那个框。

但是这样做虽然可以达到页面的绝对控制,但是却失去了设计textarea的初衷,对于如今的pc或移动端(已经占据了80%以上流量入口),我们一般不是担心高度的调节,而是宽度!

所以我们给他一个绝对或相对宽度,而用户只能调节高度(这也是一般用户的需求)

解决方法:

  在textarea css中加入min-width:90%(加入你自己的高度), max-width:90%(与前一个高度保持一致),如图:只能上下进行拖动

优点:

  1. 不影响原有布局

  2. 增加用户体验。

textarea只允许上下调节尺寸的更多相关文章

  1. Android系统定制之SystemUI修改:下拉通知栏尺寸【转】

    本文转载自:https://blog.csdn.net/huil0925/article/details/67632358 最近项目需要修改下拉通知栏面板的宽度,完成后,写个Blog做个总结,也提供给 ...

  2. 创建支持多种屏幕尺寸的Android应用

    Android涉及各种各样的支持不同屏幕尺寸和密度的设备.对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的用户界面到它显示的屏上.与此同时,系统提供 ...

  3. 创办支持多种屏幕尺寸的Android应用

    创建支持多种屏幕尺寸的Android应用 Android涉及各种各样的支持不同屏幕尺寸和密度的设备.对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的 ...

  4. Cocos2d-x使用android拍照功能加载照片内存过大,通过另存照片尺寸大小解决

    使用2dx调用android拍照功能,拍照结束后在2dx界面显示拍照照片,如果不对照片做处理,会出现内存过大的问题,导致程序崩溃,如果仅仅另存拍照照片,则照片质量大小均下降,导致照片不够清晰,后来发现 ...

  5. textarea的中文输入判断与搜狗输入法的特殊行为

    虽然要讲解的知识点是通用的,但是还是要介绍下我的应用场景和测试环境. 0.1 应用场景和测试环境 我的应用是一块使用Html Canvas开发的黑板,在黑板上实现简单的文字编辑功能. 操作系统:win ...

  6. 【BootStrap】 概述 & CSS

    BootStrap BootStrap由Twitter开发,基于HTML,CSS,JS,是一套前端框架.它的特点是对浏览器良好的支持(目前市面上所有流行浏览器都可以),兼容移动设备,以及响应式设计(响 ...

  7. 技巧JS

    1.     document.referrer可以获得上一页的地址,使用document.anchors获得页面上面所有的链接元素,而不必使用document.getElementsByTagNam ...

  8. css的margin

    1.适合于没有设定width/height的普通block水平元素 2.只适用于水平方向尺寸 例子:一侧定宽的自适应布局 <html> <head> <meta name ...

  9. lhgDialog窗口组件

    应用到你的项目 在页面head引入lhgdialog(如果项目采用jQuery作为框架,则引用jQuery的库). <script type="text/javascript" ...

随机推荐

  1. BSA Network Shell系列-nexec命令

    # nexec ## 1 说明:nexec是远程命令接口引擎 ,用于在远程主机执行命令 nexec [-?] [-t term] [-o] [-i] [-l] [-nohup hostname &qu ...

  2. Python中几种数据类型list, tuple,dict,set的使用演示

    还是直接上代码,看着代码运行,看函数介绍 # coding=utf-8 # 1 list-列表 的用法 students = [1,2,3] a = 5 classmates = [students* ...

  3. linkin大话设计模式--命令模式

    linkin大话设计模式--命令模式 首先考虑一种应用情况,某个方法需要完成某一个功能,这个功能的大部分功能已经确定了,但是有可能少量的步骤没法确定,必须等到执行这个方法才可以确定. 也就是说,我们写 ...

  4. springMVC注解方式+easyUI+MYSQL配置实例

    刚接触springMVC,使用的注解方式,也在学习阶段,所以把自己学习到的记下来.本文利用springMVC从数据库读取用户信息为例,分享一下. 1.准备相关架包及资源.因为使用springMVC+e ...

  5. HashiCorp Vault介绍

    HashiCorp Vault是一款企业级私密信息管理工具.说起Vault,不得不提它的创造者HashiCorp公司.HashiCorp是一家专注于DevOps工具链的公司,其旗下明星级产品包括Vag ...

  6. 带有 thead、tbody 以及 tfoot 元素的 HTML 表格

    设置样式: <head><style type="text/css">thead {color:green}tbody {color:blue;height ...

  7. 【转】GAMITBLOBK中固定解、浮点解、约束解、松弛解等解类型解释

    在GAMIT/GLOBK的使用过程中,经常会碰到固定解.浮点解.约束解.松弛解及其相关组合解(如约束固定解)等词汇,对于初学者,一时难以弄明白其中的含义,一般只有按部就班按照教程中,怎么说就怎么弄,不 ...

  8. 开发JQuery插件(转)

    教你开发jQuery插件(转)   阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原 ...

  9. 关于spring通知中propagation的7种配置《转载》

    <转载>:http://nannan408.iteye.com/blog/1754882

  10. yum安装centos系统依赖库

    安装centos系统依赖库,安装软件过程中,经常需要的一些库,可以在编译安装软件前执行如下命令: 首先更新系统(这步可以不执行) yum -y update 这种更新是全部更新,但是有时一些软件不想更 ...