Div width and height increase with textarea content

Question

Div increases with the entered text. Good. But when I press Enter, the height should increase according to the size of the text, and the width should not increase until the text reaches the specified width. Please, help

http://jsfiddle.net/shabbirrangwala/NkRYY/8/

$('textarea').keyup(function(e) { if ((e.keyCode || e.which) == 13) { $('.EDetailInset').css('height', ((this.value.length + 1) * 3) + 'px'); } else { $('.EDetailInset').css('width', ((this.value.length + 1) * 11) + 'px'); } });​ 

Answer 1

Let me know if it works on hold. Somehow you need to maintain a constant width

 var tWidth = $('textarea')[0].value.length; var vWidth = 0; var hIncr = 2; //initial line count - looks somehow? var iheight = $('.EDetailInset').css('height').replace('px',''); //default height to height of box $('textarea').keyup(function(e) { if ((e.keyCode || e.which) == 13) { $('.EDetailInset').css('height', (hIncr * iheight) + 'px'); //increase height by one line vWidth = 0; //so that the width does not increase hIncr++; //increase line number } else { vWidth = (vWidth+1); //only this increase and reset to zero for new line if(vWidth*11 > tWidth) //if more characters than we had, increase box width tWidth = vWidth*11; console.log((vWidth*11)+':'+tWidth); $('.EDetailInset').css('width', (tWidth) + 'px'); //no increment, width is static } });​ 

Check out this js script

Answer 2

Although far from perfect, here is my attempt: http://jsfiddle.net/V6BSY/2/

I just tried to solve the problem of horizontal scaling, as many other people have already shown how vertical scaling is performed.

It also reduces the size of the container when using backspace.

HTML:

 <div id="txt"> <textarea></textarea> </div> 

CSS

 #txt { background-color: rgba(208,228,254,0.3); border: 2px dashed #000000; height: 20px; padding: 5px; } #txt textarea { border: none; background: none; resize: none; outline: none; overflow: hidden; width: 10px; height: 15px; font-size: 10px; }​ 

JavaScript:

 $(document).ready(function() { $("#txt").css("width", $("#txt textarea").css("width")); }); $('textarea').keydown(function(e) { lines = $('#txt textarea').val().split('\n'); maxLength = getLengthOfLongestLine(lines); var h = parseInt($(this).get(0).scrollHeight) + 5; var w = maxLength * parseInt($(this).css('font-size')); if ((e.keyCode || e.which) == 13) { $("#txt").css("height", h); $(this).css("height", h); } else { $("#txt").css("width", w); $(this).css("width", w); } }); function getLengthOfLongestLine(arrLines) { var maxLength = 0; for(var line in arrLines) { if (arrLines[line].length > maxLength) { maxLength = arrLines[line].length; } } return maxLength; }​ 

Answer 3

try the following: http://jsfiddle.net/NkRYY/62/

 // HTML <div id="EDetail" class="EDetail EDetailText"> <div class="EDetailInset" > <span style="font-size: 17px;"> </span> <textarea></textarea> </div> </div> // CSS .EDetail, .EDetailDisabled { font-size: 20px; overflow: visible; position: absolute; } .EDetail { border-radius: 3px 3px 3px 3px; } .EDetailInset { background-color: rgba(217,247,217,0.3); font-size: 20px; height : 22px; padding: 5px; background-color: rgba(208,228,254,0.3); border: 2px dashed #000000; position: absolute; cursor: move; min-width:100px; } .EDetailText textarea, .EDetailText span { font: 100%/1.1 arial,sans-serif; position: absolute; white-space: pre; padding: 5px; } .EDetailText textarea, .EDetailText textarea[disabled] { background: none repeat scroll 0 center transparent; border: 0 none; bottom: 6px; box-shadow: none; color: #000000; display: block; height: 90%; left: 0px; line-height: 1.1; outline: 0 none; padding: 5px; resize: none; right: 6px; top: 0px; transition: none 0s ease 0s; width: 90%; overflow:auto; } //JS $('textarea').keyup(function(e) { if ((e.keyCode || e.which) == 13) { $('.EDetailInset').css('height', ((this.value.length + 10) * 3) + 'px'); } //else //{ //$('.EDetailInset').css('width', ((this.value.length + 10) * 11) + 'px'); //} }); 

What is the maximum width reaching time?