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?
This question is related to
html
You can't. At the time of writing, the only HTML form element that's designed to be multi-line is <textarea>
.
Input doesn't support multiple lines. You need to use a textarea to achieve that feature.
<textarea name="Text1"></textarea>
Remeber that the
<textarea>
have the value inside the tag, not in attribute:
<textarea>INITIAL VALUE GOES HERE</textarea>
It cannot be self closed as:
<textarea/>
For more information, take a look to this.
Check this:
The TEXTAREA element creates a multi-line text input control
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>
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.
It is possible to make a text-input multi-line by giving it the word-break: break-word;
attribute. (Only tested this in Chrome)
If you need textarea with auto height, Use follows with pure javascript,
function auto_height(elem) { /* javascript */_x000D_
elem.style.height = "1px";_x000D_
elem.style.height = (elem.scrollHeight)+"px";_x000D_
}
_x000D_
.auto_height { /* CSS */_x000D_
width: 100%;_x000D_
}
_x000D_
<textarea rows="1" class="auto_height" oninput="auto_height(this)"></textarea>
_x000D_
If you are using React, the library material-ui.com can help you with:
<FormControl>
<InputLabel htmlFor="textContract">{`textContract`}</InputLabel>
<Input
id="textContract"
multiline
rows="30"
type="text"
value={props.textContract}
onChange={() => {}}
/>
</FormControl>
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">
js (using 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
}
});
Source: Stackoverflow.com