ResizingTextArea Prototype Component
Written by on January 16th, 2007 in Ajax News.
Richard McMahon has wrapped the oft-seen resizable text areas in a simple Prototype component ResizingTextArea:
JavaScript
JAVASCRIPT:
-
-
var ResizingTextArea = Class.create();
-
-
ResizingTextArea.prototype = {
-
defaultRows: 1,
-
-
initialize: function(field)
-
{
-
this.defaultRows = Math.max(field.rows, 1);
-
this.resizeNeeded = this.resizeNeeded.bindAsEventListener(this);
-
Event.observe(field, “click”, this.resizeNeeded);
-
Event.observe(field, “keyup”, this.resizeNeeded);
-
},
-
-
resizeNeeded: function(event)
-
{
-
var t = Event.element(event);
-
var lines = t.value.split(’\n’);
-
var newRows = lines.length + 1;
-
var oldRows = t.rows;
-
for (var i = 0; i <lines.length; i++)
-
{
-
var line = lines[i];
-
if (line.length>= t.cols) newRows += Math.floor(line.length / t.cols);
-
}
-
if (newRows> t.rows) t.rows = newRows;
-
if (newRows <t.rows) t.rows = Math.max(this.defaultRows, newRows);
-
}
-
}
-
UJS Rule
HTML:
-
-
<% apply_behaviour “textarea”, “new ResizingTextArea(this);” %>
-
It responds to keystrokes by parsing the text value into lines, accounts for a bit of line wrapping, and ensures that the number of rows presented grows (and shrinks) to match what has been typed in. The solution is best suited where the text entry is likely to be in the 0-50 line range.
Source: Ajaxian
Original Article: http://ajaxian.com/archives/resizingtextarea-prototype-component