Mobile version of this page
Save this page in del.icio.usNasty human error in Zope ZEO setup
Next:
Ugliest site of the month - The Backyard Comedy Club
Related blogs
Changing the size of a textarea boxAutosaving textarea with AJAX
To br / or not to br/
Catching a carriage return in bash
Related by category
Vertically expanding textarea input boxes
vertically, textarea, grows, textareas, hardlines, autoexpanding, linebreaks, linebreak
18th of September 2007
I've recently improved the IssueTrackerProduct so that when you start to write in the little textarea it expands and grows vertically as the text gets larger and larger. Other sites like Highrise do this too for note taking.
Long story short, here's the demo and here's the solution:
var hardlines = element.value.split('\n');
var total = hardlines.length;
for (var i=0, len=hardlines.length; i<len; i++) {
total += Math.max(Math.round(hardlines[i].length / element.cols), 1) - 1;
}
return total;
}
$(function() {
// First, for all the textareas that have lots of lines of text
// in them, we want to double their number of rows
$('textarea.autoexpanding').each(function() {
while (_getNoLines(this) > parseInt(this.rows))
this.rows = '' + Math.round((parseInt(this.rows) * 1.5));
});
// When a user enters new lines, if they have entered more
// lines than the textarea has rows, then double the textareas rows
$('textarea.autoexpanding').bind('keyup', function() {
if (_getNoLines(this) > parseInt(this.rows))
this.rows = '' + Math.round((parseInt(this.rows) * 1.5));
});
}
How you deploy this obviously depends on your context and application. The solution here depends on jQuery. The key solution was in realizing that the visual number of lines is a combination of the number of hard linebreaks and a ratio between the textarea's cols and the length of each hard line.
Here's an application with this in use that hopefully demonstrates the usefulness of this solution.
