<textarea>调整IE 10的字体大小

Question

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 comes 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

Answer 1

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);

Answer 2

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

Answer 3

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.net/me2loveit2/qjvbhquj/11/

OLD RESPONSE

Here is one solution: http://jsfiddle.net/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>

Answer 4

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.