文本域textarea宽度和高度width及height自动适应的方法实例
文章来源：365jz.com 点击数：1085 更新时间：2018-11-06 10:14 参与评论
文本域textarea宽度和高度width及height自动适应的方法实例1：
textarea文本域宽度和高度（width、height）自动适应变化处理
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div模拟textarea文本域轻松实现高度自适应</title> <style> h2{ text-align: center; margin:50px auto; } .test_box { width: 400px; min-height: 20px; max-height: 300px; _height: 120px; margin-left: auto; margin-right: auto; padding: 3px; outline: 0; border: 1px solid #a0b3d6; font-size: 12px; line-height: 24px; padding: 2px; word-wrap: break-word; overflow-x: hidden; overflow-y: auto; border-color: rgba(82, 168, 236, 0.8); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); } </style> </head> <body> <h2>div模拟textarea文本域轻松实现高度自适应</h2> <div class="test_box" contenteditable="true"><br /></div> </body> </html>
文本域textarea宽度和高度width及height自动适应的方法实例2：
<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文本域的高度除了设置固定高度外,不会随着文本内容增加而高度自适应的问题.
解决这个问题的方法我们可以利用div模拟textarea的方式
<div id="textarea" contenteditable="true" placeholder="请输入文字,不得少于100字"></div>
contenteditable="true"这个属性实现了div文本输入的功能
css上给div的高度设置成auto 这样高度就实现了自适应
当然用div模拟textarea时,我们没办法使用placeholder的属性.
当然这个一度让我烦躁的缺点也是有解决的办法的.
给div添加 placeholder="xxxx" 的属性
同时为div设置css,代码如下
.textarea{
box-sizing: border-box;
width: 100%;
height: auto;
padding: 5px;
border:1px solid #ccc;
}
.textarea:empty:before{
content: attr(placeholder);
color:#bbb;
}
.textarea:focus:before{
content:none;
}大功告成!
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容
