您现在的位置： 365建站网 > 365文章 > 文本域textarea宽度和高度width及height自动适应的方法实例

文本域textarea宽度和高度width及height自动适应的方法实例

文章来源：365jz.com 点击数：1206 更新时间：2018-11-06 10:14 参与评论

文本域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的方式

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;
    }

大功告成!

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！点击进入论坛

您可能感兴趣的文章:

发表评论 (1206人查看，0条评论): 请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。

昵称：

最新评论

------分隔线----------------------------

上一篇：ajaxfileupload.js实现文件上传用法和例子
下一篇：js中用延时器实现定时器功能的用法

大家感兴趣的内容

文本域textarea宽度和高度width及height自动适应的方法实例

</>code

</>code

</>code

您可能感兴趣的文章:

公司信息

快速入口

其它栏目

业务咨询