<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. 删除元素splice、shift\pop

      splice() 方法: 向/从数组中添加/删除项目,然后返回被删除的项目. splice( index位数, 数量, 新添加 ) 该方法会改变原始数组 删除数组中第一个元素 arr.shift( ...

  2. Redis高级特性介绍及实例分析

    转自:http://www.jianshu.com/p/af7043e6c8f9   Redis基础类型回顾 String Redis中最基本,也是最简单的数据类型.注意,VALUE既可以是简单的St ...

  3. java中package指什么

    为了更好地组织类,Java 提供了包机制,用于区别类名的命名空间,类似C#的 namespace的作用,防止名字相同的类产生冲突. Java中的一个package(包)就是一个类库单元,包内包含有一组 ...

  4. Linux系统下安装pycharm

    在 linux下打开浏览器,搜索pycharm,点击download. 下载好的文件的名称可能是 ‘pycharm-professional-2018.3.5.tar.gz’. 打开终端界面,输入命令 ...

  5. JGroups

    JGroups Developer(s) Bela Ban Stable release 4.0.10.Final / February 1, 2018 Written in Java Operati ...

  6. Python-视图 触发器 事务 存储过程

    1.视图2.触发器*** 在某个时间发生了某个事件时 会自动触发一段sql语句3.事务*****4.存储过程***** 5.函数6.备份与恢复*** mysqldump -u -p (库名 [表名] ...

  7. numpy函数：[1]shape用法

    shape函数是numpy.core.fromnumeric中的函数,它的功能是读取矩阵的长度,比如shape[0]就是读取矩阵第一维度的长度.它的输入参数可以使一个整数表示维度,也可以是一个矩阵.

  8. js跳转页面（转）

    <span id="tiao">3</span><a href="javascript:countDown"></a& ...

  9. Python中什么是深拷贝和浅拷贝且有什么区别

    浅拷贝: >>> a = [1, 2, 3] >>> b = a >>> a [1, 2, 3] >>> b [1, 2, 3] ...

  10. Python+selenium自动化测试中Windows窗口跳转方法

    Python+selenium自动化测试中Windows窗口跳转方法 #第一种方法 #获得当前窗口 nowhandle=driver.current_window_handle #打开弹窗 drive ...