Dynamically change the number of lines for text input field?

i’d like to duplicate the way that most native messaging apps handle the text input field…that is to say when there’s only one line of text the input field is simply one line like so:

and then once you type more than one line of text in, it expands to multiple lines like this:

it usually stops at 3 lines and allows the user to scroll through any additional lines.

i have a fiddle of a similar concept, http://jsfiddle.net/2UDdh/55/, but i fear this is incredibly inefficient and would kill performance on phones. is this possible any other way?

There are a few topics on this, maybe they will help:

2 Likes

wow thanks, @brandyshea to the rescue

2 Likes

how to achieve this in ionic2

For ionic 2, on your textarea add some id, for example:

<ion-textarea rows="1" id="messageInputBox" placeholder="Send message" (input)="change()" required></ion-textarea>

And then on change you can update size of text area:

change() {
    // get elements
    var element   = document.getElementById('messageInputBox');
    var textarea  = element.getElementsByTagName('textarea')[0];

    // set default style for textarea
    textarea.style.minHeight  = '0';
    textarea.style.height     = '0';

    // limit size to 96 pixels (6 lines of text)
    var scroll_height = textarea.scrollHeight;
    if(scroll_height > 96)
      scroll_height = 96;

    // apply new style
    element.style.height      = scroll_height + "px";
    textarea.style.minHeight  = scroll_height + "px";
    textarea.style.height     = scroll_height + "px";
}
3 Likes

Hi, nice solution. One cuestion, how can i send the id of the input to change method?

<ion-textarea rows="1" id="messageInputBox" placeholder="Send message" (input)="change('messageInputBox')" required></ion-textarea>

change(element_id) {
  ...
}

?

1 Like

Haha, thanks! It is a fast solution. Any solution like This.id or similar?