在不增加 textarea 大小的情况下调整 textarea 中的字体大小答案

【问题标题】：Resizing font in textarea without increasing textarea size在不增加 textarea 大小的情况下调整 textarea 中的字体大小
【发布时间】：2013-02-12 23:17:16
【问题描述】：

我在弄乱一些 Jquery 来让滑块控制文本区域中字体的大小，并使用了类似的东西：

...  
slide: function( event, ui ) {
    $('#t_area').css("font-size", ui.value + "px");
}
....

在函数内控制滑块。我注意到即使文本区域中没有文本，当我移动滑块时它的大小仍然会增加（当其中有文本时也会变得太大。）所以我想知道是否有办法增加没有副作用的文本大小？

谢谢

【问题讨论】：

您可以添加一个 if 语句来检查 t_area 是否包含数据。

标签： javascript jquery slider textarea

【解决方案1】：

css：

textarea { max-width:300px;max-height:300px; }

【讨论】：

【解决方案2】：

你可以只使用 css。

textarea{
    width: 100px;
    height: 100px; 
}

【讨论】：

【解决方案3】：

在textarea 上设置尺寸。演示：http://jsfiddle.net/6qZAh/

textarea {
    width: 100px;
    height: 50px;    
}

如果没有明确的尺寸，大小基于textarea 的行/列。即使没有明确设置这些值，用户代理也会使用默认值。

演示：http://jsfiddle.net/6qZAh/1/

$("textarea").on("click",function(){
   var t = $(this);
   alert(t.prop("rows"));
   alert(t.prop("cols"));
});

在 Chrome 和 IE9 中，这显示“2”和“20”。

这似乎是spec-driven（强调我的）：

行

如果将解析非负整数的规则应用于属性的值产生一个大于零的数字，那么元素的字符高度就是那个值；否则，为 2。

列

如果应用规则用于将非负整数解析为属性值导致大于零的数字，则元素的字符宽度为价值;否则，为 20。

【讨论】：

【解决方案4】：

if($('#t_area').text() != ""){    
  $('#t_area').css("font-size", ui.value + "px");
}

【讨论】：

-1 - 这不是必需的，也不会解决问题。 OP 明确指出，即使textarea 中有 not 文本，这也是一个问题。如果您修改答案，我将删除反对票。
是的，那是因为它是否有文本没有条件。我的解决方案只有在 textarea 有某些东西时才会增加字体大小，否则它将采用默认声明的字体大小。也让山姆接受。
OP 说它在这两种情况下都会增长。你只会在它为空的情况下修改它。一旦添加了文本，您的解决方案还需要考虑设置大小。有一个更简单的解决方案（设置明确的维度），其他答案说明了这一点。