调整textarea中的字体大小而不增加textarea大小

Question

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

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

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

由于

Answer 1

css：

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

Answer 2

你可以使用css。

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

Answer 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（强调我的）：

<强>行

  

如果将解析非负整数的规则应用于   属性的值导致大于零的数字，然后是   element的字符高度就是那个值;否则，是2。

<强>列数

  

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

Answer 4

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