How can make an input[type=text] element to work as textarea?

css, forms, html, input, javascript

Solution

As answered here:

Multiple lines of input in <input type="text" />

It turns out that adding the css property `word-break: break-word;` makes it behave a bit more as you want it. I did a quick test and it does work.

Buyer beware, there will be other features `textarea` does that `input[type="text"]` can't have. But it's a start!

DEMO

input{
    height:500px;
    width:500px;
    word-break: break-word;
}

<input type="text">

This will only allow the text to flow to the next line when it hits the right border but it won't let you use the return key to start a new line and the text is verticaly centered in the input.

If JavaScript is an option, as much fun as it is to try and twist poor `input`'s arm until it behaves as a `textarea`, the best solution to your problem is to display an actual `textarea`, hide the text `input` and keep both in sync with javascript. Here is the fiddle:

http://jsfiddle.net/fen05zd8/1/

If jQuery is an option, then you could convert your target `input[type="text"]` to `textarea` on the fly. While converting, you could copy all relevant attributes like `id` and `value` and `class`. Events will automatically point to the replaced `textarea` bound using event delegation or via class selectors.

This way you won't have to change your existing markup (as you said changing to textarea is not possible for you). Just inject a little Javascript / jQuery and viola you get the functionality of `textarea` using actual `textarea`.

One sample demo using Javascript is above. Another sample demo using jQuery is here: http://jsfiddle.net/abhitalks/xqrfedg2/

And a simple snippet:

$("a#go").on("click", function () {

    $("input.convert").each(function () {
        var $txtarea = $("<textarea />");
        $txtarea.attr("id", this.id);
        $txtarea.attr("rows", 8);
        $txtarea.attr("cols", 60);        
        $txtarea.val(this.value);
        $(this).replaceWith($txtarea);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Name:</label><input id="txt1" type="text" />
<br /><br />
<label>Address:</label><input id="txt2" type="text" class="convert" value="Address here.." />
<hr />
<a id="go" href="#">Convert</a>

Problem

Original source

Related problems

• Multiple lines of input in <input type="text" />
• More than 1 row in <Input type="textarea" />