自適應高度文本框，沒有滾動條，並且隨內容多少自動變換高度，美觀方便。
方法一：
css代碼：
<style type="text/css">
.textarea{
width: 99%;
min-height: 20px;
_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(171,173,179, 0.8);
}
</style>html代碼：
<div id="divId" class="textarea" style="margin-top:0px;" contenteditable="true">
<br />
</div>這時如果需要設置div中的內容可以用：
document.getElementById(“divId”).innerText=”內容”;
設置；
獲取裏邊的值可以用：
var value=document.getElementById(“divId”).innerText;
或者
var beiZhu=$(“#div_beiZhu”).text(); –這是jquery代碼
來獲取。
獲取的值如果需要存入數據庫，如SQLServer，該字段類型只能用vchar(**)來保存，如果用別的類型或是text類型的話，需要保存的值中的 換行 和 空格 會出現不同的問題。所以可以適用於小容量的需要。
方法二：
這是代碼：
<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
border: 1px solid #a0b3d6;
overflow: auto;
min-height: 20px;
max-height: 500px;
/*高度值根據屏幕高度設置，是爲了防止文本框高度大於屏幕高度後再點擊換行或空格時，頁面自動定位到文本框頂端，那麼頁底文字就看不到的情況。 這也是該方法缺點之一，上一個方法就不會出現這個問題*/
padding: 0;
outline: none;
background-color: #fff;
resize: none;
margin-top:0px;
width:100px;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init () {
var text = document.getElementById('text');
function resize () {
text.style.height = 'auto';
var vHeight= text.scrollHeight + 2;
text.style.height =vHeight +'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
</script>
</head>
<body onload="init();">
<textarea cols="" rows="" id="text"></textarea>
</body>
</html>
這個方法的文本框的值可以在數據庫中用任意字段類型保存，格式都不會出現錯亂。只是代碼量較多，使用麻煩。
兩種方法優缺點比較：
第一種代碼簡潔，使用方便，可以大量使用，只是存儲會出現一定問題。
第二種代碼較複雜，但是適用範圍更廣，存儲更加靈活方便。
