テキストボックスの高さが動的に増加しますか？

Question

可能性の重複：
Autosizing Textarea

こんにちはすべて、私は問題を解決しようとすると、それとは全くどこになっていないのです。私がしようとしているのは、ユーザーのテキストが幅（オーバーレイされたときFacebookのステータス更新テキストボックスのようなもの）のとき、入力ボックスの高さを動的に変更することです。

簡単な更新を入力し、テキストがテキストボックスより長い場合は新しい行を作成します。私はtextareaを使ってみましたが、何らかの理由でそれを強制的に1行にすることはできません。

誰もがこれを行う簡単な方法を知っていますか？ :(

Answer 1

この行くを与える、textareaをストレッチする（jQueryの）を取得するには：http://www.unwrongest.com/projects/elastic/

は

正確に1行の高さについては、あなたはCSSを削除するだけでなく、<textarea>タグでrows="1"を試みることができますしかし、一部のブラウザでは、テキストエリアの最小高さを複数行に設定することがあります。divを別の方法で使用すると、ユーザーがクリックするとブラウザが非表示のテキストボックスユーザーは隠しテキストボックスに入力し、divにはJavaScriptを使用してテキストボックスの内容が与えられます。 tは点滅するカーソルを取得していますが、divのパイプ|を使用してフラッシュを作成することもできますが、開始する頃には時間がかかり始めます。私は再びテキストエリアでは、手動でCSSの高さと幅のパラメータを使用してtextareaの大きさを制御することができ

ジェームズ

Answer 2

このことができます個人的に:-)

希望を、試してみました。キー入力イベントをtextareaにバインドすると、ボックス内のテキストの量を取得し、それに応じて高さを調整できます。たとえば、ここにあなたがに入れ、すべての50文字のボックスの高さに20個のピクセルを追加することを、いくつかのjQueryの：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"> 
</script> 

<textarea id="textbox" style="height:20px;width:400px;"></textarea> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#textbox").val(''); 
    $("#textbox").keypress(function() { 
     var textLength = $("#textbox").val().length; 
     if (textLength % 50 == 0) { 
      var height = textLength/50; 
      $("#textbox").css('height', 20+(height*20)); 
     } 
    }); 
}); 
</script> 

あなたは所望の効果を得るために値を微調整することができます。