Multiple lines of input in <input type="text" />
HtmlHtml Problem Overview
I have this text input in a form:
<input type="text"
cols="40"
rows="5"
style="width:200px; height:50px;"
name="Text1"
id="Text1"
value="" />
I am trying to get it to take multiple lines of input. The width and height make the box to be bigger, but the user can enter text all (s)he wants yet it fills one line only.
How do I make the input more like a textarea?
Html Solutions
Solution 1 - Html
You need to use a textarea to get multiline handling.
<textarea name="Text1" cols="40" rows="5"></textarea>
Solution 2 - Html
It is possible to make a text-input multi-line by giving it the word-break: break-word; attribute. (Only tested this in Chrome)
Solution 3 - Html
You can't. At the time of writing, the only HTML form element that's designed to be multi-line is <textarea>.
Solution 4 - Html
Use the textarea
<textarea name="textarea" style="width:250px;height:150px;"></textarea>
don't leave any space between the opening and closing tags Or Else This will leave some empty lines or spaces.
Solution 5 - Html
If you need Multiline Textarea with Auto Height Increase feature, You can use following simple javascript,
function auto_height(elem) { /* javascript */
elem.style.height = "1px";
elem.style.height = (elem.scrollHeight)+"px";
}
.auto_height { /* CSS */
width: 100%;
}
<textarea rows="1" class="auto_height" oninput="auto_height(this)"></textarea>
Solution 6 - Html
Check this:
> The TEXTAREA element creates a > multi-line text input control
Solution 7 - Html
You should use textarea to support multiple-line inputs.
<textarea rows="4" cols="50">
Here you can write some text to display in the textarea as the default text
</textarea>
Solution 8 - Html
Use <div contenteditable="true"> (supported well) with storing to <input type="hidden">.
HTML:
<div id="multilineinput" contenteditable="true"></div>
<input type="hidden" id="detailsfield" name="detailsfield">
jQuery:
$("#multilineinput").on('keyup',function(e) {
$("#detailsfield").val($(this).text()); //store content to input[type=hidden]
});
//optional - one line but wrap it
$("#multilineinput").on('keypress',function(e) {
if(e.which == 13) { //on enter
e.preventDefault(); //disallow newlines
// here comes your code to submit
}
});
Solution 9 - Html
If you're using React, you could use the 3rd-party UI library MUI. It has a custom proprietary <Input> element with a multiline option.
As LSE commented, ultimately it gets rendered as <textarea>.
<FormControl>
<InputLabel htmlFor="textContract">{`textContract`}</InputLabel>
<Input
id="textContract"
multiline
rows="30"
type="text"
value={props.textContract}
onChange={() => {}}
/>
</FormControl>
Solution 10 - Html
If you don't need to edit it, you can use a
<span>text here</span>
It will expand with the text.