Elastic textarea plugin in jQuery

Question

I created a flexible jQuery plugin. I have a problem that if I write a word, such as "jQuery", on the first line and I press enter, the word "jQuery" will be hidden for a few milliseconds, and then a new line will be inserted into the text box.

My plugin page is http://jsfiddle.net/yash_wow/7F8aK/3/

Please help me solve this problem.

PS - I don’t want to use any other plugin, and I don’t want a code that adds an extra line to the bottom of the text field, like all other plugins do!

Answer 1

I managed to configure your plugin to work in Chrome here (unverified in other browsers). In fact, I had to process Enter in a special way to avoid adding a new line to the end of the text field and scrolling down to automatically view it before you get the opportunity to grow the text field.

I also had to add .keyup() so that backspace would work.

Here is the full javascript:

 /* Author - Yash Mathur */ jQuery.fn.autoGrow = function() { return this.each(function() { var colsDefault = this.cols; var rowsDefault = this.rows; var grow = function() { growByRef(this); } var growByRef = function(obj, enterPressed) { 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 (enterPressed) linesCount++; if (linesCount > rowsDefault) obj.rows = linesCount; 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; } $(this).keypress(function(evt) { if (evt.which == 13) { growByRef(this, true); this.value += '\n'; return false; } else { growByRef(this, false); } }); $(this).keyup(function(evt) { if (evt.which == 13) return false; growByRef(this, false); }); this.style.overflow = "hidden"; //this.onkeyup = grow; this.onfocus = grow; this.onblur = grow; growByRef(this); }); }; $("textarea").autoGrow(); 

Answer 2

 /* Author - Yash Mathur */ jQuery.fn.autoGrow = function(){ return this.each(function(){ var colsDefault = this.cols; var rowsDefault = this.rows; 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; 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; } this.style.overflow = "hidden"; this.onkeydown = grow; this.onfocus = grow; this.onblur = grow; this.keypress = grow; growByRef(this); }); }; $("textarea").autoGrow(); 

Don't you think KeyPress and Keydown are much better.