Grow text areas automatically in response to input

This commit is contained in:
Tom Hughes 2012-02-15 21:30:34 +00:00
parent aa4205482a
commit b6163f0fc2
3 changed files with 64 additions and 1 deletions

View file

@ -1,5 +1,6 @@
//= require jquery //= require jquery
//= require jquery_ujs //= require jquery_ujs
//= require jquery.autogrowtextarea
/* /*
* Called as the user scrolls/zooms around to aniplate hrefs of the * Called as the user scrolls/zooms around to aniplate hrefs of the

View file

@ -143,8 +143,9 @@
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function () { $(document).ready(function () {
var auth_token = $("meta[name=csrf-token]").attr("content"); var auth_token = $("meta[name=csrf-token]").attr("content");
$("form input[name=authenticity_token]").val(auth_token); $("form input[name=authenticity_token]").val(auth_token);
$("textarea").autoGrow();
}); });
</script> </script>

View file

@ -0,0 +1,61 @@
/*!
* Autogrow Textarea Plugin Version v2.0
* http://www.technoreply.com/autogrow-textarea-plugin-version-2-0
*
* Copyright 2011, Jevin O. Sewaruth
*
* Date: March 13, 2011
*/
jQuery.fn.autoGrow = function(){
return this.each(function(){
// Variables
var colsDefault = this.cols;
var rowsDefault = this.rows;
//Functions
var grow = function() {
growByRef(this);
}
var growByRef = function(obj) {
var linesCount = 0;
var lines = obj.value.split('\n');
for (var i=lines.length-1; i>=0; --i)
{
linesCount += Math.floor((lines[i].length / colsDefault) + 1);
}
if (linesCount >= rowsDefault)
obj.rows = linesCount + 1;
else
obj.rows = rowsDefault;
}
var characterWidth = function (obj){
var characterWidth = 0;
var temp1 = 0;
var temp2 = 0;
var tempCols = obj.cols;
obj.cols = 1;
temp1 = obj.offsetWidth;
obj.cols = 2;
temp2 = obj.offsetWidth;
characterWidth = temp2 - temp1;
obj.cols = tempCols;
return characterWidth;
}
// Manipulations
this.style.width = "auto";
this.style.height = "auto";
this.style.overflow = "hidden";
this.style.width = ((characterWidth(this) * this.cols) + 6) + "px";
this.onkeyup = grow;
this.onfocus = grow;
this.onblur = grow;
growByRef(this);
});
};