<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. Python使用MySQL数据库【转】

    转自 Python使用MySQL数据库(新)[很详细][fetchall和fetchmany有啥区别呢?] - CSDN博客https://blog.csdn.net/u011350541/artic ...

  2. sumafan:python爬虫多线程爬取数据小练习（附答案）

    抓取 https://www.cnbeta.com/ 首页中新闻内容页网址, 抓取内容例子: https://hot.cnbeta.com/articles/game/825125 将抓取下来的内容页 ...

  3. 华为QUIDWAY系列路由器的单臂路由配置案例

    作者:邓聪聪 单臂路由 单臂路由(router-on-a-stick)是指在路由器的一个接口上通过配置子接口(或“逻辑接口”,并不存在真正物理接口)的方式,实现原来相互隔离的不同VLAN(虚拟局域网) ...

  4. 专题:CF图论杂题

    题目是来自HZW的博客(构造题我是各种不会...) Solved 1 / 1 A CodeForces 500A New Year Transportation Solved 1 / 1 B Code ...

  5. 通过URL传递中文参数的乱码处理

    环境:web.xml中配置了 <filter> <filter-name>encodingFilter</filter-name> <filter-class ...

  6. zabbix批量监控urls的状态码

    .添加url监控脚本 [root@node1 usr]# vim /usr/local/zabbix_agents_3.2.0/scripts/web_site_code_status.sh #!/b ...

  7. SQL语句常用约束类型

    常用五类约束: not null:非空约束,指定某列不为空  unique: 唯一约束,指定某列和几列组合的数据不能重复  primary key:主键约束,指定某列的数据不能重复.唯一  forei ...

  8. python-序列化模块

    本节内容 前言 json模块 pickle模块 shelve模块 总结 一.前言 1. 现实需求 每种编程语言都有各自的数据类型,其中面向对象的编程语言还允许开发者自定义数据类型(如:自定义类),Py ...

  9. Confluence 6 Windows 中以服务方式自动重启为服务手动安装 Confluence 分发包

    在 Windows: 打开一个命令输入框,然后修改目录到 <CONFLUENCE-INSTALL>/bin 目录中.你需要以管理员权限运行这个命令行输入框(Run as administr ...

  10. Confluence 6 附件存储提取文本文件

    当基于文本的文件上传到 Confluence(例如,Word,PowerPoint 等),这些文件中的文本是可以提取并且添加到索引中的,用户可以通过索引来搜索这些文件中的文本内容,不仅仅是搜索文件名. ...