<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. WCF之endpoint的binding属性

    最近在回顾之前做的wcf项目时,发现这个binding的属性有BasicHttpBinding,WSHttpBinding,webHttpBinding等几种方式.但是其中的区别当时未深入研究.现在网 ...

  2. shutil.copy()、os.walk()、os.rename()实例

    #!/usr/bin/python # -*- coding: UTF-8 -*- import os import shutil Path = "panel/" PNPath = ...

  3. eclipse的工程中如何查找字符串

    ctrl + h 后弹出 tab选项, 你选择 file search 然后在下面输入要查找的字符串 workset 那里选择你要查找的项目 默认是全部项目进行查找

  4. 分布式服务管理框架 ZooKeeper

      核心功能   统一命名服务(Name Service)   通过有层次的目录结构产生唯一的名称,同时可以将名称关联到特定资源   配置管理(Configuration Management)   ...

  5. 给Linux增加swap内存

    有时内存不足时, 编译xxx报错cc: 编译器内部错误:已杀死(程序 cc1) Please submit a full bug report, with preprocessed source if ...

  6. CentOS 7 连接ssh方法

    自己在VMware中装了CentOS 6.3,然后主机(或者说xshell)与里面的虚拟机连不通,刚学习,一头雾水,查了半天,也不知道怎么弄. 经指点,找到下面这篇文章,感谢博主: http://bl ...

  7. HTML中特殊符号的处理

    一.写在前面 今天在写页面时记不清大/小于符号该怎么写,于是就想着整理一下方便后面用到! 二.HTML中常用特殊符号的处理    <    <   小于号或显示标记        > ...

  8. Confluence 6 缓存状态

    Confluence 为系统的内部缓存提供了缓存的状态以便于你对缓存的大小的命中率进行跟踪,在必要的情况下,你可以对缓存进行调整,让缓存能够更好的满足你的使用需求.请查看 Performance Tu ...

  9. 找到 Confluence 6 的日志和配置文件

    找到 Confluence 的日志文件 这部分内容对 Confluence 的默认日志表现进行描述并且假设你没有对 Confluence 的默认日志配置进行修改.为了统一在不同平台中的日志输出,Con ...

  10. Confluence 6 的 WebDAV 客户端整合介绍

    WebDAV 允许用户通过一个 WebDAV 客户端来访问 Confluence.例如,微软 Windows 的 'My Network Places'.通过为访问的用户提供权限,这个用户可以在 Co ...