I'm trying to implement a behavior like this one, that is a draggable resizable textarea with dynamic font sizing. I have to admit that I'm quite new to web dev so forgive me if I will write some stupid thing.

I'm facing the following issue when I try to resize the font in the text area, below is the code I use to resize the font depending on the textarea height

// Called on keyup
that._adaptFontSize = function(){
  var i = 1;
  while ( $textArea[0].scrollHeight <= $textArea.height() ){
    console.log('Iteration : '+(i++));
    $textArea.css('font-size', '+=1');
  }
};

My idea here is to maximize the font size based on the textarea height (maybe I should also consider the width.

My issue is that the code above produce different results based on the browser, in Chrome and Safari the font size at the end of the loop is the same on Firefox is the double, I don't really understand what's going on.. this basic fiddle shows the issue

UPDATE 1

I have found that the problem of calculating a wrong size es from the placeholder presence.

So basically on Chrome / Safari if there is no placeholder the font size at the end of the iteration is equal to the size I get on Firefox. So there is something wrong in relying to the placeholder for the max size calculation.

UPDATE 2

the following fiddle does more or less what I would like to achieve, the real problem is that it does not work at all on IE 10, the reason is that the scrollHeight on IE10 does not change when changing the font-size.

UPDATE 3

Apparently the scrollHeight on IE10 does not get update when increasing the font size inside the loop. That basically is the naive method used to fit the font inside the textarea.

I was wondering if an alternative to scrollHeight exist to workaround this problem, but I did not find any working solution so far

I'm trying to implement a behavior like this one, that is a draggable resizable textarea with dynamic font sizing. I have to admit that I'm quite new to web dev so forgive me if I will write some stupid thing.

I'm facing the following issue when I try to resize the font in the text area, below is the code I use to resize the font depending on the textarea height

// Called on keyup
that._adaptFontSize = function(){
  var i = 1;
  while ( $textArea[0].scrollHeight <= $textArea.height() ){
    console.log('Iteration : '+(i++));
    $textArea.css('font-size', '+=1');
  }
};

My idea here is to maximize the font size based on the textarea height (maybe I should also consider the width.

My issue is that the code above produce different results based on the browser, in Chrome and Safari the font size at the end of the loop is the same on Firefox is the double, I don't really understand what's going on.. this basic fiddle shows the issue

UPDATE 1

I have found that the problem of calculating a wrong size es from the placeholder presence.

So basically on Chrome / Safari if there is no placeholder the font size at the end of the iteration is equal to the size I get on Firefox. So there is something wrong in relying to the placeholder for the max size calculation.

UPDATE 2

the following fiddle does more or less what I would like to achieve, the real problem is that it does not work at all on IE 10, the reason is that the scrollHeight on IE10 does not change when changing the font-size.

UPDATE 3

Apparently the scrollHeight on IE10 does not get update when increasing the font size inside the loop. That basically is the naive method used to fit the font inside the textarea.

I was wondering if an alternative to scrollHeight exist to workaround this problem, but I did not find any working solution so far

• javascript
• jquery
• internet-explorer
• firefox
• textarea

• I don't see the issue. It pretty much works (growing at least) the same on Chrome and Firefox. Ubuntu. – Scimonster Commented Aug 10, 2014 at 16:59
• I'm on a mac and my result is : Chrome font-size 86px ,Firefox 256px and the end of the loop. – oiledCode Commented Aug 10, 2014 at 19:01
• I tested your fiddle from update 2 on IE 10 and it works just fine. It even works on IE 9. – ic3b3rg Commented Sep 2, 2014 at 6:20

4 Answers 4

Chrome calculates scrollHeight as the maximum of the placeholder text's height and the textarea content's height. I don't know if that's a bug or a feature.

The workaround is simple – clear placeholder before adjusting the font size, then restore it afterwards:

var textArea = $('.area');

var keyupHandler = function(e) {
  console.log('keyup');
  var ph= textArea[0].placeholder;
  textArea[0].placeholder= '';
  while ( textArea[0].scrollHeight <= textArea.height()) {
    console.log('increase');
    textArea.css('font-size', '+=1');
  }
  while ( textArea[0].scrollHeight > textArea.height()) {
    console.log('decrease');
    textArea.css('font-size', '-=1');
  }
  textArea[0].placeholder= ph;
}
textArea.on('keyup',keyupHandler);

i have managed to grow and shrink font according to the text entered into the text area

Link to fiddle

and the javascript modified as below

var textArea = $('.area');
var maxTextSize = '75';
var keyupHandler = function (e) {
    console.log('keyup');
    console.log(textArea[0].clientHeight);
    console.log(textArea[0].scrollHeight);
    console.log($("#ta").css('font-size'));
    while (textArea[0].clientHeight = textArea[0].scrollHeight && $("#ta").css('font-size') < maxTextSize) {
        console.log('font increase');
        textArea.css('font-size', '+=1');
    }

    while (textArea[0].clientHeight < textArea[0].scrollHeight) {
        console.log('increase');
        textArea.css('font-size', '-=1');
    }


}
textArea.on('keydown', keyupHandler);

Edit : tested in firefox 25.01 as well

UPDATE

I think your problem is the placeholder. Chrome & safari will resize the placeholder text as well, making it the defining text once you start typing. If you leave it out it works fine: http://jsfiddle/me2loveit2/qjvbhquj/11/

OLD RESPONSE

Here is one solution: http://jsfiddle/me2loveit2/qjvbhquj/

I am using jQuery UI to bind the resize event to my fitText() function.

JS:

$("textarea").resizable({
    resize: function() {
        fitText();
    },
    minWidth:'100px',
    minHeight:'50px'
});
$(document).keyup(function(){
    fitText();
});
function fitText(){
    var textarea = $('textarea');
    while((textarea.get(0).scrollHeight < textarea.outerHeight()) && (textarea.get(0).scrollWidth < textarea.outerWidth())){
        textarea.css('font-size','+=1');
    }
    while((textarea.get(0).scrollHeight > textarea.outerHeight()) || (textarea.get(0).scrollWidth > textarea.outerWidth())){
        textarea.css('font-size','-=1');
    }
}
fitText();

CSS:

textarea{
    text-align: center;
    width:100px;
    height:50px;
    overflow:hidden;
}

HTML:

<textarea>hi this is text</textarea>

Maybe you can use a "contentEditable" div instead of a textarea? I think that on the provided igmur link they use a div as well.