Tuesday, January 16th, 2007
ResizingTextArea Prototype Component
Category: Component, Prototype
, Rails
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.
Related Content:
3.4 rating from 37 votes
The problem is that this does a lot of math based on the Col parameter of the text area which is not accurate when the text area is resized with CSS.
Re-written for jquery:
$.fn.ResizeArea = function() {
var defaultRows = 1;
var resizeNeeded = function () {
var lines = $(this).val().split('\n');
var newRows = lines.length + 1;
var oldRows = $(this).attr('rows');
for (var i = 0; i = $(this).attr('cols'))
newRows += Math.floor(line.length / $(this).attr('cols'));
}
if (newRows > $(this).attr('rows'))
$(this).attr('rows',newRows);
if (newRows
try this again.
$.fn.ResizeArea = function() {
var defaultRows = 1;
var resizeNeeded = function () {
var lines = $(this).val().split('\n');
var newRows = lines.length + 1;
var oldRows = $(this).attr('rows');
for (var i = 0; i = $(this).attr('cols'))
newRows += Math.floor(line.length / $(this).attr('cols'));
}
if (newRows > $(this).attr('rows'))
$(this).attr('rows',newRows);
if (newRows
oh well.
Does this really have anything to do with ajax? it’s javascript counting characters…
This is a pretty simple and easy way to make text areas grow when need be. Came in pretty handy for my app and i made a quick demo since a few people asked for it.
http://jasonmoser.com/ajax
Does not exactly work as intended with non-strict rendering in Gecko / WebKit browsers. Perhaps a little more testing is needed.
FYI, if you’re using the nightly WebKit build or Safari 3.0, you don’t need any javascript magic to get resizable textareas. They’re standard fare… every textarea you encounter on the web can be resized as needed. WebKit may have turned the preference for this off by default, but if you enter the following command in the terminal, I think this is the command I issued some time ago to turn resizable textareas on:
defaults write com.apple.safari WebKitTextAreasAreResizable boolean true
Cheers,
Leland
I did this one some time ago inspired by a JSAN widget.
It uses styles for calculating the height. And has been tested in IE 6/7,Safari and Firefox, although it might need some refactoring you might find it useful.
ResizeableTextarea = Class.create();
ResizeableTextarea.prototype = {
initialize: function(element, options) {
this.element = $(element);
this.size = Element.getStyle(this.element, 'height').match(/^\d+/).first()*1;
this.options = Object.extend({
inScreen: false,
resizeStep: 10,
minHeight: this.size,
}, options || {});
Event.observe(this.element, "keyup", this.resize.bindAsEventListener(this));
if ( !this.options.inScreen ) {
this.element.style.overflow = 'hidden';
}
this.element.setAttribute("wrap","vitual");
},
resize : function(){
this.shrink();
this.grow();
},
shrink : function(){
if ( this.size this.element.clientHeight ) {
if ( this.options.inScreen && (20 + this.element.offsetTop + this.element.clientHeight) > document.body.clientHeight ) {
return;
}
this.size += 1;
this.element.style.height = (this.options.resizeStep + this.size)+'px';
this.grow();
}
}
}
Then just add
onfocus="new ResizeableTextarea(this);"
to the textarea you want to resize.
Seems like WordPress ate my code, so I’ve here is a direct link to the Javascript Textarea Resizer