Question

我试图实现像this one这样的行为，这是一个带有动态字体大小的可拖动的可调整大小的textarea。我不得不承认，对于网络开发我来说是个新手，所以请原谅我，如果我会写一些愚蠢的东西。

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

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

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

我的问题是上面的代码会根据浏览器生成不同的结果，在Chrome和Safari中，循环结束时的字体大小是相同的，Firefox是双倍的，我真的不明白＆＃ 39; s继续..这个基本的fiddle显示了问题

更新1

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

所以基本上在Chrome / Safari上如果没有占位符，迭代结束时的字体大小就等于我在Firefox上获得的大小。因此，依靠占位符进行最大尺寸计算会出现问题。

更新2

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

更新3

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

我想知道是否存在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＆amp; 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

也许你可以使用＆＃34; contentEditable＆＃34; div而不是textarea？我认为在提供的igmur链接上他们也使用div。

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

4 个答案:

Link to fiddle