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

Question

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 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?

Answer 1

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

Answer 2

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);
    });

Answer 3

您需要使用textarea进行多行处理。

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

Answer 4

<textarea>标签，您需要！