<HTML>

<HEAD>

<TITLE>textarea宽度、高度自动适应处理方法</TITLE>

<!-- 控制宽度的自动适应 -->

<style type="text/css">

.comments {

width:100%;/*自动适应父布局宽度*/

overflow:auto;

word-break:break-all;

/*在ie中解决断行问题(防止自动变为在一行显示，主要解决ie兼容问题，ie8中当设宽度为100%时，文本域类容超过一行时，

当我们双击文本内容就会自动变为一行显示，所以只能用ie的专有断行属性“word-break或word-wrap”控制其断行)*/

}

</style>

</HEAD> 

<BODY>

<FORM METHOD=POST ACTION= " ">

<!-- 主要控制高度的自动适应 --> 

<!-- 第一个是普通textarea -->

<textarea class="comments" rows="10" cols="10"> </textarea>

<!-- 以下两种方式都可以解决textarea行高自动适应类容的高度 -->

<textarea class="comments" rows=1 name=s1 cols=27 onpropertychange= "this.style.posHeight=this.scrollHeight "></textarea> 

<textarea class="comments" style="height:expression((this.scrollHeight>150)?'150px':(this.scrollHeight+5)+'px');overflow:auto;"></textarea>

</FORM>

</BODY>

</HTML>

textarea文本域宽度和高度width及height自动适应实现代码的更多相关文章

  1. textarea文本域宽度和高度（width、height）自己主动适应变化处理

    文章来源:http://www.cnblogs.com/jice/archive/2011/08/07/2130069.html <HTML> <HEAD> <TITLE ...

  2. div模拟textarea文本域轻松实现高度自适应

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  4. textarea文本域轻松实现高度自适应

    转载:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 今天需要些一个回复评论的页 ...

  5. jquery之div模拟textarea文本域轻松实现高度自适应

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. CSS3：固定textarea文本域宽度

    textarea在一些浏览器上可以被拖拉改变大小,为了保持美观,可以通过 CSS3 resize 属性禁掉 textarea{resize:none; //不允许用户调整元素大小}

  7. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

  8. css之——div模拟textarea文本域的实现

    1.问题的出现: <textarea>标签为表单元素,但一般用于多行文本的输入,但是有一个明显的缺点就是不能实现高度自适应,内容过多就回出现滚动条. 为了实现高度自适应:用div标签来代模 ...

  9. textarea文本域的高度随内容的变化而变化

    用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码 代码如下: .t_area{ width:300px; overflow-y:visible } & ...

随机推荐

  1. ABP后台服务之作业调度Quartz.NET

    一.简介 Quartz.NET是一个开源的作业调度框架,是OpenSymphony 的 Quartz API的.NET移植,它用C#写成,可用于winform和asp.net应用中.它提供了巨大的灵活 ...

  2. OpenStack实践系列④计算服务Nova

    OpenStack实践系列④计算服务Nova 3.6 Nova控制节点的部署创建服务的凭证,完成下列步骤: 创建nova用户,并加入到service项目中,赋予admin权限 [root@node1 ...

  3. nginx配置文件注释说明

    #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...

  4. 前端 -----jQuery的位置信息

    08-jQuery的位置信息   jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的 ...

  5. LuoGu P2735 电网 Electric Fences

    题目传送门 这个东西,本来我是用求出两条一次函数解析式然后判断在x坐标下的y坐标值来做的 首先因为没考虑钝角三角形,WA了 然后又因为精度处理不好又WA了 一气之下,只能去网上查了查那个皮克定理 首先 ...

  6. Java学习——面向对象【3】

    1. 继承  java的类是单继承(一个子类只能继承一个父类),不能多继承(多个父类):A继承自B,A也继承自C,可以多重继承,就是A继承自B,B继承自C(A->B->C), 所有的类都继 ...

  7. sublime c++

    install: sudo add-apt-repository ppa:webupd8team/sublime-text-3   sudo apt-get update sudo apt-get i ...

  8. java多线程快速入门（二十二）

    线程池的好处: 避免我们过多的去new线程,new是占资源的(GC主要堆内存) 提高效率 避免浪费资源 提高响应速度 作用:会把之前执行某个线程完毕的线程不会释放掉会留到线程池中给下一个调用的线程直接 ...

  9. Android开发实战一 百度SDK

    一 申请百度API key 百度地图API:http://developer.baidu.com/map/ 百度地图开发者平台地址:http://developer.baidu.com/map/ .点 ...

  10. 添加按钮 table增加一行 删减按钮 table去掉一行

    需求描述:做的一个AA新增功能,同时可以为这个即将新增的AA添加内容,而且AA的内容默认展示一行列表,点击添加按钮后出现下一行列表 解决思路:页面首先展示一个表头和列表的一行,作为默认展示的一行列表, ...