文本域textarea宽度和高度width及height自动适应的方法实例1:
textarea文本域宽度和高度(width、height)自动适应变化处理
</>code
- <!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:
</>code
- <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,代码如下
</>code
- .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;
- }
大功告成!
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛