Entry
How can I increase the rows of a TEXTAREA element when the content overflows?
Feb 26th, 2001 05:35
Martin Honnen,
IE4+ allows to script that by comparing
textarea.scrollHeight > textarea.clientHeight
With NN6 you can dynamically change the rows of a TEXTAREA element but
have a hard time to figure out when the text overflows. Thus the
following code works with NN6 only when the wrap attribute is set to
off.
<HTML>
<HEAD>
<TITLE>
dynamic textarea growth
</TITLE>
<SCRIPT>
function countLineBreaks (string) {
var re = /\r\n|\r|\n/g;
var n = 0;
while (re.exec(string))
n++;
return n;
}
function adjustRows (textarea) {
if (document.all) {
while (textarea.scrollHeight > textarea.clientHeight)
textarea.rows++;
textarea.scrollTop = 0;
}
else if (textarea.rows) {
var lineBreaks = countLineBreaks(textarea.value);
var rows = parseInt(textarea.rows);
var wrap = textarea.getAttribute('wrap');
if (lineBreaks > rows)
textarea.rows = ++rows;
else if (wrap.toLowerCase() == 'soft' || wrap.toLowerCase() ==
'hard') {
while (textarea.rows * textarea.cols <= textarea.value.length) {
textarea.rows = ++rows;
}
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<TEXTAREA ROWS="5" COLS="20" WRAP="off"
ONKEYUP="adjustRows(this)"
>
1: wrap=off
</TEXTAREA>
<BR>
<TEXTAREA ROWS="5" COLS="20" WRAP="hard"
ONKEYUP="adjustRows(this)"
>
1: wrap=hard
</TEXTAREA>
<BR>
<TEXTAREA ROWS="5" COLS="20" WRAP="soft"
ONKEYUP="adjustRows(this)"
>
1: wrap=soft
</TEXTAREA>
</BODY>
</HTML>
