2

重複の可能性:
テキストエリアの自動サイズ変更

こんにちは、私は問題を解決しようとしていますが、まったく問題がありません。私がやろうとしているのは、ユーザーのテキストが幅を超えたときに入力ボックスの高さを動的に変更することです(Facebookのステータス更新テキストボックスのようなものです)。

簡単な更新を入力すると、テキストがテキスト ボックスよりも長い場合は、新しい行が作成されます。テキストエリアを使用してみましたが、何らかの理由でデフォルトで正確に1行にすることはできません。

これを行う簡単な方法を知っている人はいますか？:(

4

2 に答える 2

4

textareaCSSのheightおよびwidthパラメータを使用して、のサイズを手動で制御できます。キープレスイベントをにバインドする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>

値を微調整して、目的の効果を得ることができます。

于 2010-12-12T14:40:33.390 に答える
2

textareaストレッチするには、これを試してください (jQuery) : http://www.unwrongest.com/projects/elastic/。

正確に 1 行の高さについては、CSS スタイルを削除するだけでなくrows="1"、タグで試すことができます。<textarea>ただし、ブラウザによっては、テキストエリアの最小の高さを複数の行に設定する場合があります。

もう 1 つの解決策はdiv、ユーザーがクリックしたときに、非表示のテキスト ボックスにブラウザーのフォーカスを合わせるオンスクリーンを使用することです。ユーザーが非表示のテキスト ボックスに入力するとdiv、テキスト ボックスの内容が渡されます。JavaScript。注意が必要な点は、点滅するカーソルを取得することですが|、div でパイプ文字を使用して点滅させることもできますが、これは開始時に長くなってしまいます。私は個人的にテキストエリアをもう一度試してみます:-)

お役に立てれば、

ジェームズ

于 2010-12-12T14:19:21.500 に答える