2

動的テキストエリアを作成したいのですが、コンテンツが増えるにつれて行が増えるはずです。

私はこのコードを使用しています：

$("#text_textarea").keyup(function(e) {
    //splitting textarea value wrt '\n' to count the number of lines
    if ($(this).val().lastIndexOf('\n')!=-1)
    var x = $(this).val().split('\n');
    $(this).attr( "rows" , x.length+1 );
});

しかし、ユーザーが新しい行を与えずに書き続けると失敗します\n( を押しEnterます)。

4

4 に答える 4

3 
var keyUpTimeout = false; // Required variables for performance
var keyupTimer = 0;

$("#text_textarea").keyup(function(e) {
    var cooldownTimeout = 500;
    //Set the cooldown time-out. The height check will be executed when the user
    // hasn't initiated another keyup event within this time
    
    var ths = this;
    function heightCheck(){
        keyupTimer = false;
        // Reset height, so that the textarea can shrink when necessary
        ths.style.height = "";

        // Set the height of the textarea
        var newheight = this.scrollHeight + 2;
        ths.style.height = newheight + "px";
    }
    if(keyupTimeout){ //Has a cooldown been requested?
        clearTimeout(keyupTimer); //This+next line: Refresh cooldown timeout.
        keyUpTimer = setTimeout(heightCheck, cooldownTimeout);
        return; //Return, to avoid unnecessary calculations
    }
    
    // Set a cooldown
    keyupTimer = setTimeout(heightCheck, cooldownTimeout);
    keyupTimeout = true; //Request a cooldown
});

このスクリプトは、テキストエリアの高さをテキストが収まるように変更します。

アップデート

追加機能を追加しました: パフォーマンスを向上させるために (CSS の高さを変更するにはかなりの量のコンピューターの処理能力が必要です)、クールダウン効果を追加しました: 高さのチェックは、ユーザーがkeyup500 ミリ秒間イベントを開始しなかった場合にのみ実行されます。 （この値を希望に合わせて調整してください）。

于 2011-09-18T10:12:09.400 に答える
2

これを読む、

テキストエリアの高さの増加

TextAreaExpander (デモ)

autoResize プラグイン

JQuery エラスティック

于 2011-09-18T10:18:38.197 に答える
0

wrap='hard'テキストエリアで属性を使用する必要があります。

于 2011-09-18T10:16:53.953 に答える
0

このコードを書きます。それはどうですか..

$("#text_textarea").keyup(function(e) {
    var textarea_height = Number($(this).css('height').replace("px", ""))+4;
    var scroll_height = this.scrollHeight;

    if(textarea_height < scroll_height ){   
        $(this).css('height' ,"");
        var x = Number(scroll_height) + 3;
            if(x != $(this).height()) 
        $(this).css("height", x+"px");
     }
});
于 2011-09-18T13:10:25.527 に答える