Ik heb deze tekstinvoer in een formulier:
<input type="text"
cols="40"
rows="5"
style="width:200px; height:50px;"
name="Text1"
id="Text1"
value="" />
Ik probeer ervoor te zorgen dat het meerdere invoerregels nodig heeft. De breedte en hoogte maken het vak groter, maar de gebruiker kan zoveel tekst invoeren als hij wil, maar het vult slechts één regel.
Hoe maak ik de invoer meer als een tekstgebied?
Antwoord 1, autoriteit 100%
Je moet een tekstgebied gebruiken om multiline-verwerking te krijgen.
<textarea name="Text1" cols="40" rows="5"></textarea>Antwoord 2, autoriteit 8%
Het is mogelijk om een tekstinvoer met meerdere regels te maken door deze het kenmerk word-break: break-word;te geven. (Alleen getest in Chrome)
Antwoord 3, autoriteit 8%
Dat kan niet. Op het moment van schrijven is <textarea>.
Antwoord 4, autoriteit 7%
Gebruik het tekstgebied
<textarea name="textarea" style="width:250px;height:150px;"></textarea>
laat geen spatie tussen de openings- en sluitingstags. Anders blijven er lege regels of spaties achter.
Antwoord 5, autoriteit 2%
Controleer dit:
Het TEXTAREA-element maakt een
meerregelige tekstinvoerbesturing
Antwoord 6
U moet textareagebruiken om invoer met meerdere regels te ondersteunen.
<textarea rows="4" cols="50">
Here you can write some text to display in the textarea as the default text
</textarea>
Antwoord 7
Als u Multiline Textareamet de functie Auto Height Verhoognodig heeft, kunt u het volgende eenvoudige javascriptgebruiken,
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>Antwoord 8
Gebruik <div contenteditable="true">(goed ondersteund) met opslaan naar <input type="hidden">.
HTML:
<div id="multilineinput" contenteditable="true"></div>
<input type="hidden" id="detailsfield" name="detailsfield">
js (met 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
}
});
Antwoord 9
Als je React gebruikt, kan de bibliotheek material-ui.com je helpen met:
<FormControl>
<InputLabel htmlFor="textContract">{`textContract`}</InputLabel>
<Input
id="textContract"
multiline
rows="30"
type="text"
value={props.textContract}
onChange={() => {}}
/>
</FormControl>