How to automatically expand textarea

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • ifedi
    New Member
    • Jan 2008
    • 60

    #1

    How to automatically expand textarea

    I need to make a textarea grow automatically (in height) as the user entry flows over to a new line...
    Actually I got this working well, only when ENTER is hit (I made use of the total number of \r\n in the textarea content, and setting the textarea ROWS attribute to this), but am at a loss implementing this for the situation when the text WRAPS by itself (ie with long text lines). The problem is that a long phrase may actually occupy 3 lines visually, but is counted as only one \r\n, leading to partially hidden text and overflow scroll situation.
    Any help is highly welcome
  • improvcornartist
    Recognized Expert Contributor
    • May 2007
    • 303

    #2
    You could get the textarea value length and cols value to determine how many rows you want and apply it on key up/down or however fits best.
    Code:
    textarea.rows = Math.ceil(textarea.value.length / textarea.cols);

    Comment

    • ifedi
      New Member
      • Jan 2008
      • 60

      #3
      Originally posted by improvcornartis t
      You could get the textarea value length and cols value to determine how many rows you want and apply it on key up/down or however fits best.
      Code:
      textarea.rows = Math.ceil(textarea.value.length / textarea.cols);
      Thanks improvcornartis t for your kind reply.
      However, I have like 2 issues with this solution:
      Code:
      textarea.rows = Math.ceil(textarea.value.length / textarea.cols);
      1. It seems I would therefore need to supply the COLS attribute for any textarea needing this functionality. Problem is I've mostly used the STYLE.WIDTH instead, to determine the textarea widths.
      2. Even given the COLS attribute, the code rather fails when the textarea contains CRLF on lines that do not contain the COLS number of characters, like so:

      Lorem ipsum dolor sit amet consectetuer Lorem pretium molestie congue Curabitur. Et at augue at morbi at adipiscing condimentum wisi lorem In.
      1.Lorem
      2.ipsum
      3.dolor
      4.sit
      5.condimentum

      With this example, the the textarea does not expand as frequently as expected, because each of the shorter lines does not meet the COLS attribute, to cause a lengthening!
      I remain grateful for your further attention to this.
      Regards, Ifedi.

      Comment

      • improvcornartist
        Recognized Expert Contributor
        • May 2007
        • 303

        #4
        You are right, that is a very generic approach. You will probably need to try a combination of things, such as considering the text length as well as the number of newlines. You may be able to use something like textarea.scroll Height.

        Comment

        • ifedi
          New Member
          • Jan 2008
          • 60

          #5
          Originally posted by improvcornartis t
          You may be able to use something like textarea.scroll Height.
          Yes!!
          As a matter of fact, it was not "a combination of newlines and text length" that did it; it was textarea.scroll Height.
          Bravo brother, I appreciate your insight.
          Ifedi.

          Comment

          Working...