<textarea> 调整字体大小问题 IE 10

Question

我正在尝试实现类似this one 的行为，这是一个具有动态字体大小的可拖动可调整大小的文本区域。我不得不承认我对网络开发很陌生，所以如果我会写一些愚蠢的东西，请原谅我。

当我尝试调整文本区域中的字体大小时，我遇到了以下问题，下面是我用来根据文本区域高度调整字体大小的代码

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

我的想法是根据文本区域的高度最大化字体大小（也许我也应该考虑宽度。

我的问题是上面的代码会根据浏览器产生不同的结果，在 Chrome 和 Safari 中循环结束时的字体大小是相同的，在 Firefox 上是双倍的，我不太明白发生了什么。 . 这个基本的fiddle 显示了问题

更新 1

我发现计算错误大小的问题来自占位符的存在。

所以基本上在 Chrome / Safari 上，如果没有占位符，迭代结束时的字体大小等于我在 Firefox 上得到的大小。所以依靠占位符来计算最大尺寸是有问题的。

更新 2

以下fiddle 或多或少做了我想要实现的，真正的问题是它在 IE 10 上根本不起作用，原因是 IE10 上的 scrollHeight更改字体大小时不会更改。

更新 3

显然，当增加循环内的字体大小时，IE10 上的 scrollHeight 不会得到更新。这基本上是用于将字体适合文本区域内的天真的方法。

我想知道是否存在替代 scrollHeight 来解决此问题，但到目前为止我没有找到任何可行的解决方案

Answer 1

Chrome 将 scrollHeight 计算为占位符文本高度和 textarea 内容高度的最大值。我不知道这是一个错误还是一个功能。

解决方法很简单——在调整字体大小之前清除placeholder，然后再恢复：

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

我已经设法根据输入到文本区域的文本来扩大和缩小字体

Link to fiddle

和javascript修改如下

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

编辑：也在 Firefox 25.01 中测试过

Answer 3

更新

我认为你的问题是占位符。 Chrome & safari 也会调整占位符文本的大小，使其成为您开始输入后的定义文本。 如果你忽略它，它可以正常工作：http://jsfiddle.net/me2loveit2/qjvbhquj/11/

旧响应

这是一种解决方案：http://jsfiddle.net/me2loveit2/qjvbhquj/

我正在使用 jQuery UI 将 resize 事件绑定到我的 fitText() 函数。

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

也许您可以使用“contentEditable”div 而不是 textarea？ 我认为在提供的 igmur 链接上，他们也使用了 div。