CODEWITHSUNDEEP
javascripthtmlcss
Pat Green
Pat Green

Reputation: 110

How to add another line on overflow in a text input?

I want to create more text area for the user ( A new empty line ), when the user has filled out the textbox completely.

I'm not sure whether I can do this with CSS or if I need to use JS.

I don't want the text to keep continuing in the same amount of area, like what happens by default.

My Question is: How can I make my tag: <input type="text" />, automatically display a new empty text line when the initial text area is filled out, instead of continuing the text in the same area?

Upvotes: 0

Views: 410

Answers (4)

Riccio Zhang
Riccio Zhang

Reputation: 1

The <textarea> tag, you need!

Upvotes: 0

Shrinivas Pai
Shrinivas Pai

Reputation: 7711

You need to use a textarea to get multiline handling.

<textarea name="Text1" cols="40" rows="5" ... ></textarea>

Upvotes: 0

Daniel A. White
Daniel A. White

Reputation: 190976

You should use a <textarea> instead of an <input type="text">. It is multiline by design.

Upvotes: 1

Darren Willows
Darren Willows

Reputation: 2131

HTML

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <textarea>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare elementum sapien sit amet vestibulum. Maecenas et convallis lacus.
    <textarea></textarea>

JAVASCRIPT

   function textareaResize(e) {
      $(e).css({'height':'auto','overflow-y':'hidden'}).height(e.scrollHeight);
    }
    $('textarea').each(function () {
      textareaResize(this);
    }).on('input', function () {
      textareaResize(this);
    });

Upvotes: 0

Related Questions