How can make an input[type=text] element to work as textarea?
Solution 1
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!
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>
Solution 2
$('input[type="button"]').click(function(e) {
$('input[type="text"]').val($('#source').html());
});
#source {
border: 1px solid #ccc;
height: auto;
margin-top: 10px;
min-height: 10px;
overflow: auto;
padding: 5px;
width: 106px;
word-break: break-word;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="text" />
<div id="source" contenteditable=""></div>
<input type="button" value="Send" />
This would be the HTML, the only downside to this is that the input would submit HTML. Take this for example..
Lorem ipsum
Dolores amet
would submit like this: Lorem ipsum <br> Dolores amet
Here's a codepen: http://codepen.io/pacMakaveli/pen/MYYOZW
Solution 3
Why don't you use Textarea tag like
<textarea id="txtArea" rows="10" cols="70"></textarea>
The "input" tag doesn't support rows and cols attributes. This is why the best alternative is to use a textarea with rows and cols attributes. You can still add a "name" attribute and also there is a useful "wrap" attribute which can serve pretty well in various situations.
There is no meaning for giving height to input tag for reference
More than 1 row in <Input type="textarea" />
Vinay Patial
I am an Front End Developer, working on this field from the past 8 years. It's awesome!!!
Updated on November 21, 2020Comments
-
Vinay Patial over 3 years
I have an element
input[type=text]
, I want to make it works as an textarea element. Means I need to have a bigger height of aninput[type=text]
element with showing multiple lines just like an textarea element. I have an issue that I can't take textarea in place ofinput[type=text]
, so I need a way where I can convert or make it work astextarea
. -
Abhitalks over 9 years
-
Victor over 9 years@abhitalks, that's true, newlines don't work right. Ah well, can't have everything :)
-
web-tiki over 9 yearsIt doesn make it pretty wierd but it lets the text flow to the next line for me jsfiddle.net/webtiki/d142ruk4
-
James Thorpe over 9 years@web-tiki problem is, as abhitalks pointed out, you can't hit return to start a new line etc
-
Abhitalks over 9 years@web-tiki: If the Op is using jQuery, it becomes even easier. You may want to use this: jsfiddle.net/abhitalks/xqrfedg2
-
web-tiki over 9 years@abhitalks yes, that seems much better! can you edit that in the answer?
-
Paul over 9 yearsSorry, while that's interesting as an edge case of text input, it doesn't really work as a text area would.
-
mavi about 3 yearsHe is saying that he can't use TextArea.