Как создать текстовое поле Multinline, динамически растущее без полос прокрутки? - PullRequest
Новая
       30

Как создать текстовое поле Multinline, динамически растущее без полос прокрутки?

2 голосов
/ 30 марта 2012

Мне нужно использовать текстовое поле (многострочное) в моем приложении.Он должен расти по мере того, как пользователь вводит в него текст.Я хочу, чтобы это текстовое поле росло без полос прокрутки.Я попробовал allow=resize:null, но он просто предотвращает растяжение текстового поля. Все, что я хочу, это текстовое поле, как мы видим в области комментариев / общего доступа в Facebook, которое растет просто без полос прокрутки по бокам.Я надеюсь, что я аккуратно объяснил это.

1 Ответ

2 голосов
/ 30 марта 2012

Вы можете использовать что-то вроде этого: (Источник: Расширяемый или Авторазмер высоты TextBox по Colt Kwong ) 

    <asp:TextBox ID="txtMsg" runat="server"  TextMode="MultiLine" 
style="overflow:hidden" onkeyup="AutoExpand(this, event)" Rows="2" />

используя этот JavaScript: 

    function AutoExpand(txtBox, event) 
{
    if (event.keyCode == "13" || event.keyCode == "8") {
        var therows = 0
        var thetext = document.getElementById(txtBox.id).value;
        var newtext = thetext.split("\n");
        therows += newtext.length

        document.getElementById(txtBox.id).rows = therows;
        return false;
    }
}

Или, если вам нравится jquery, вам стоит взглянуть на плагин jQuery autoResize .

Плагин для jQuery, который изменяет размеры элементов ввода на соответствует количеству введенных данных. Он работает на textarea, введите элементы [type = text] и input [type = password].

Использование выглядит следующим образом: 

$('textarea#foo').autoResize();

Вы можете передать параметры: 

$('textarea#foo').autoResize({
    maxHeight: 200,
    minHeight: 100
});
...