Вариант ... источник
изменение размера textarea
добавил только вывод количества строк в прежний код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>изменение размера textarea</title>
<style type="text/css">
body {
background-color:#004B52;
}
textarea{
background-color: #FF0000;
color:yellow;
font-size: medium;
}
div{
color: #FFFFFF;
display: inline-block;
padding: 5px;
}
</style>
<script language="JavaScript" type="text/javascript">
function flexibleTextarea(b) {
var a = document.getElementById(b) || b;
if (a) {
a.style.overflow = "hidden";
a.cols = a.cols > 0 ? a.cols : 20;
var c = a.rows = a.rows > 0 ? a.rows : 2;
a.rows = 1;
b = -1;
var f = a.value;
for (a.value = ""; a.scrollHeight <= a.clientHeight && a.scrollWidth <= a.clientWidth;) {
a.value += "0";
b++
}
a.value = f;
a.rows = c;
var g = RegExp("([^\r\n]{" + b + "})([^\r\n])");
a.onkeyup = a.onkeydown = function () {
a.value = a.value.replace(g, "$1\r\n");
for (var d = 1, e = a.value; e.search(/\r?\n/) > -1;) {
d++;
e = e.replace(/\r?\n/, "")
}
a.rows = d < c ? c : d;
document.getElementById("show").innerHTML = a.rows
}
}
};
window.onload = function(){
flexibleTextarea('textarea');
}
</script>
</head>
<body>
<textarea id='textarea' rows="3" cols="50" ></textarea><div id="show">3</div>
<br />
</body>
</html>
