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


Tags: javascript,html,css

Problem :

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?



Solution :

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


    CSS Howto..

    how do i hide anchor text without hiding the anchor

    How to make height in CSS responsive?

    how to display a dropdown ul two per row

    How can CSS interfere with JavaScript?

    How to make 3-corner-rounded triangle in CSS

    How to make a hyperlink navigation bar active in CSS or javascript?

    How to replace flex in this layout?

    How can I add an image to a
  • tag dynamically
  • How to manage magento CSS file with over 10,000 lines?

    HTML: slideshow is not recognised as an element in the main content of the page

    how to draw the # of likes bubble like what is on the right side of the facebook like button

    How to make background fill or flush to the footer at the bottom of the window

    How to style the tick mark checkbox using css without using images?

    PHP Show Hidden Div

    How to make all the rows of a table the same height as the biggest one

    how to get a css that does not cause overflow of words beyond box [closed]

    How to blend CSS classes for different results

    How can I move text to the left with CSS?

    Border of outer element affects how margin of inner element is displayed, why?

    How can I target text input fields with CSS?

    How to set a fixed background with CSS?

    Transition on div height change caused by its inner element showing or hiding

    How to add an unknown amount of dots to a line depending on length of word?

    Flexbox and Bootstrap How to Put Image in Navbar Brand Area

    How to center something I appended with js and also replace it

    How to achieve straight shadow with CSS?

    How to position div inside middle of navbar?

    How to prevent rendering css when loading stylesheet from local storage?

    How do I make the link in the back div clickable

    how to Put a img and text middle of a div