关于textarea自适应高度

 

一、css方式（随内容的变化自适应高度，加载时告诉不固定。））

<style>
.test_box {
width: 100px;
_height: 20px;
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
/*_overflow-y: visible;*/
}
</style>

 

<div style="border:1px solid #ccc;width:200px;word-wrap: break-word;" contenteditable="true">qewe
fda
fasdg
gasd
gsag
</div>
<div class="test_box" contenteditable="true">
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww111
</div>

二、js方式（加载时高度一定，双击后自适应高度）

<title></title>
<style>
.textarea {
/*width: 300px;*/
border: 1px solid #ccc;
overflow: hidden;
resize: none;
}
</style>
<script src="JS_file/jquery-1.7.2.min.js"></script>

 

<textarea class="textarea">
电视广告过过过过过过过过过过过过过过过过过过过过过 onfocus='textarea.style.posHeight=this.scrollHeight'

电视广告过过过过过过过过过过过过过过过过过过过过过
</textarea>

<script type="text/javascript">
$(".textarea").dblclick(function () {
$(this).css("height", this.scrollHeight);
});
</script>