htmlinputword-wrap

Wrapping text inside input type="text" element HTML/CSS

The HTML shown below,

<input type="text"/>

is displayed in a browser like so:

When I add the following text,

The quick brown fox jumped over the lazy dog.

Using the HTML below,

<input type="text" value="The quick brown fox jumped over the lazy dog."/>

it is displayed in a browser like so:

But I would like it to be displayed in a browser like so:

I want the text in my input element to wrap. Can this be accomplished without a textarea?

Solution

  • That is the textarea's job - for multiline text input. The input won't do it; it wasn't designed to do it.

    So use a textarea. Besides their visual differences, they are accessed via JavaScript the same way (use value property).

    You can prevent newlines being entered via the input event and simply using a replace(/\n/g, '').