Html <input type="text" /> 中的多行输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6262472/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple lines of input in <input type="text" />
提问by Beginner
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?
如何使输入更像文本区域？
回答by ólafur Waage
You need to use a textarea to get multiline handling.
您需要使用 textarea 来获得多行处理。
<textarea name="Text1" cols="40" rows="5"></textarea>回答by Sté
It is possible to make a text-input multi-line by giving it the word-break: break-word;attribute. (Only tested this in Chrome)
通过给它word-break: break-word;属性可以使文本输入多行。（仅在 Chrome 中测试过）
回答by álvaro González
You can't. At the time of writing, the only HTML form element that's designed to be multi-line is <textarea>.
你不能。在撰写本文时，唯一设计为多行的 HTML 表单元素是<textarea>.
回答by themightysapien
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.
不要在开始和结束标签之间留下任何空格否则这将留下一些空行或空格。
回答by Matías Fidemraizer
Check this:
检查这个：
The TEXTAREA element creates a multi-line text input control
TEXTAREA 元素创建多行文本输入控件
回答by Osanda Deshan
You should use textareato support multiple-line inputs.
您应该使用textarea来支持多行输入。
<textarea rows="4" cols="50">
Here you can write some text to display in the textarea as the default text
</textarea>
回答by Prasad Gayan
If you need textareawith auto height, Use follows with pure javascript,
如果您需要具有自动高度的textarea，请使用以下纯 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>回答by IgniteCoders
Input doesn't support multiple lines. You need to use a textareato achieve that feature.
输入不支持多行。您需要使用 textarea来实现该功能。
<textarea name="Text1"></textarea>
Remeber that the
<textarea>have the value inside the tag, not in attribute:
请记住，在tag 中
<textarea>有值，而不是在属性中：
<textarea>INITIAL VALUE GOES HERE</textarea>
It cannot be self closed as:
<textarea/>
它不能自我关闭，因为：
<textarea/>
For more information, take a look to this.
有关更多信息，请查看此。
回答by Fanky
Use <div contenteditable="true">(supported well) with storing to <input type="hidden">.
使用<div contenteditable="true">（支持良好）与存储到<input type="hidden">.
HTML:
HTML：
<div id="multilineinput" contenteditable="true"></div>
<input type="hidden" id="detailsfield" name="detailsfield">
js (using jQuery)
js（使用 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
}
});
