源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

[HTML/Xhtml] textarea文本域宽度和高度width及height自动适应实现代码

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2013-12-30 15:22:33 | 显示全部楼层 |阅读模式
本文为大家介绍下textarea文本域宽度和高度(width、height)如何自动适应变化处理,下面有个不错的示例,感兴趣的朋友可以参考下  
复制代码代码如下:
<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>
回复

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-9-1 03:28:14 | 显示全部楼层
看看看看看看看看看看看看看看看看看看看看看看看看看看看
回复 支持 反对

使用道具 举报

6

主题

2万

回帖

425

积分

中级会员

Rank: 3Rank: 3

积分
425
发表于 2022-9-5 11:56:42 | 显示全部楼层
谢谢下载来看看
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

58

积分

注册会员

Rank: 2

积分
58
发表于 2022-10-28 15:53:33 | 显示全部楼层
还不错啊
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-11-29 10:56:35 | 显示全部楼层
感谢楼主分享
回复 支持 反对

使用道具 举报

3

主题

2万

回帖

172

积分

注册会员

Rank: 2

积分
172
发表于 2023-2-17 00:45:48 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

14

主题

1万

回帖

75

积分

注册会员

Rank: 2

积分
75
发表于 2023-8-22 06:35:29 | 显示全部楼层
的沙发水电费水电费
回复 支持 反对

使用道具 举报

4

主题

2万

回帖

303

积分

中级会员

Rank: 3Rank: 3

积分
303
发表于 2023-9-12 10:24:45 | 显示全部楼层
啦啦啦啦啦啦哈哈哈
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-10-21 00:04:19 | 显示全部楼层
还有什么好东西没
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-3-26 15:29:04 | 显示全部楼层
天天源码论坛
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2025-1-31 23:52 , Processed in 0.067623 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表