Grow text areas automatically in response to input
This commit is contained in:
parent
aa4205482a
commit
b6163f0fc2
3 changed files with 64 additions and 1 deletions
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
61
vendor/assets/jquery/jquery.autogrowtextarea.js
vendored
Normal file
61
vendor/assets/jquery/jquery.autogrowtextarea.js
vendored
Normal 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);
|
||||||
|
});
|
||||||
|
};
|
Loading…
Add table
Add a link
Reference in a new issue