javascript - テキストエリアのサイズを大きくせずにテキストエリアのフォントのサイズを変更する

Question

私はいくつかのJqueryをいじって、スライダーでテキスト領域のフォントのサイズを制御し、次のようなものを使用していました。

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

スライダーを制御する関数内。テキストエリアにテキストがない場合でも、スライダーを動かすとサイズが大きくなることに気づきました（また、テキストがあると大きくなりすぎました）。そのため、大きくする方法があるかどうか疑問に思いました。その副作用を持たないテキストのサイズ？

ありがとう

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」が表示されます。

これは仕様主導のようです（強調は私のものです）：

行

負でない整数を解析する規則を属性の値に適用した結果が 0 より大きい数値になる場合、要素の文字の高さはその値になります。それ以外の場合は 2 です。

列

負でない整数を解析する規則を属性の値に適用した結果が 0 より大きい場合、要素の文字幅はその値になります。それ以外の場合は 20 です。

Answer 4

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