atinypixel (owner)

Revisions

gist: 48278 Download_button fork
public
Description:
Automatically grow your textarea inputs
Public Clone URL: git://gist.github.com/48278.git
Embed All Files: show embed
grow_text_area.js #
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// USAGE EXAMPLE (in HTML)
// <script type="text/javascript">
// new ResizingTextArea("dom_id_for_textarea_here");
// </script>
 
var ResizingTextArea = Class.create();
 
ResizingTextArea.prototype = {
    defaultRows: 2,
 
    initialize: function(field)
    {
        this.defaultRows = Math.max(field.rows, 2);
        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);
    }
}