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

Posted 2023-05-07

【中文标题】<textarea> 调整字体大小问题 IE 10

【英文标题】：<textarea> resize font issue IE 10

【发布时间】：2014-10-01 23:31:01

【问题描述】：

我正在尝试实现类似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 来解决此问题，但到目前为止我没有找到任何可行的解决方案

【问题讨论】：

我没有看到这个问题。它在 Chrome 和 Firefox 上的工作方式（至少增长）几乎相同。 Ubuntu。

我在 Mac 上，结果是：Chrome font-size 86px ，Firefox 256px 和循环结束。

我在 IE 10 上的更新 2 中测试了你的小提琴，它工作得很好。它甚至可以在 IE 9 上运行。

【参考方案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);

【讨论】：

不知道是否是 chrome / safari 的错误我已经用不同的方法解决了这个问题

我会对您的方法非常感兴趣。 Chrome 会这样计算滚动高度，这让我很惊讶。

【参考方案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 中测试过

【讨论】：

你的代码没有最大化字体大小，这是我试图实现的

@elio.d，我想我没有正确理解，代码确实最大化了字体大小。

【参考方案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>

【讨论】：

我不能使用 jquery ui，以及为什么在第一个循环中你会出现两次相同的条件？

哦，对不起，我把你的问题弄错了，虽然你想要类似的工作示例页面。我将进行一些调整以适应您的非工作示例。

我更新了我的回复。我认为你的问题是占位符。在响应中查看我的新小提琴链接

我最终得到了一个类似于你的解决方案，所以即使我在我认为赏金将属于你之前找到了解决方案。这种方法与我的方法相似的唯一问题是，每次插入新行时，前一行都会向上推一段时间，这是一种丑陋的视觉效果。你知道如何解决或解决这个问题吗？ ?

【参考方案4】：

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