Как посчитать номера строк в текстовой области

Question

Я хочу создать динамическую текстовую область, она должна увеличиваться в строках по мере увеличения содержимого.

Я использую этот код:

$("#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).

Answer 1

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).высота требует значительного количества энергии компьютера), я добавил эффект перезарядки: проверка высоты будет выполняться только тогда, когда пользователь не инициировал событие keyup в течение 500 миллисекунд (отрегулируйте это значение в соответствии с вашими пожеланиями).

Answer 2

прочитайте это,

Увеличение высоты текстовой области

---

TextAreaExpander (Demo)

Плагин autoResize

JQuery Elastic

Answer 3

Я пишу этот код. что по этому поводу ..

$("#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");
     }
});

Answer 4

Вы должны использовать атрибут wrap='hard' в текстовой области.