Expand Focused Textareas

README.md

Derived from this stackoverflow post:

http://stackoverflow.com/questions/16885880/jquery-how-to-know-when-a-table-row-loses-focus

This javascript file will autogrow textareas inside of a table row that contain a lot of text. Useful for bulk-editing forms and such.

AutoVerticalGrowTextArea.js

$('table tr').on('focus', 'input,textarea', function(event) {
    var $blurFrom = $(event.delegateTarget);
    $blurFrom.css("background-color","yellow");
    
    $blurFrom.find("textarea[cols]").each(function(i, element) {
        expandHeight($(element));
    });
});
$('table tr').on('focusout', 'input,textarea', function(event) {
    var $blurFrom = $(event.delegateTarget);
    $blurFrom.css("background-color","white");
    
    $blurFrom.find("textarea[cols]").each(function(i, element) {
        collapseHeight($(element));
    });
});

function expandHeight($this){
    var rows = ($this.val().length / ($this.prop("cols")-2) + 1);
    $this.prop("rows",rows);
}
function collapseHeight($this){
    $this.prop("rows", 1);
}

Example.html

<script src="AutoVerticalGrowTextArea.js"></script>

<table>
    <tr id>
        <td><textarea cols="20" rows="1">Wow. Much vertical resize as you type. So highlight on focus. Such amaze.</textarea></td>
        <td><textarea cols="20" rows="1"></textarea></td>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
    </tr>
    <tr>
        <td><textarea cols="20" rows="1"></textarea></td>
        <td><textarea cols="20" rows="1"></textarea></td>
        <td>Content 1</td>
        <td>Content 2</td>
        <td>Content 3</td>
    </tr>
</table>