<input type =“ text” />中的多行输入

我有以下形式的文本输入：

<input type="text"
       cols="40" 
       rows="5" 
       style="width:200px; height:50px;" 
       name="Text1" 
       id="Text1" 
       value="" />

我试图让它接受多行输入。宽度和高度会使框变大，但用户可以输入所有想要的文本，但只能填充一行。

如何使输入更像文本区域？

您需要使用文本区域来进行多行处理。

<textarea name="Text1" cols="40" rows="5"></textarea>

通过赋予word-break: break-word;属性，可以制作多行文本输入。（仅在Chrome中对此进行测试）

你不能 在撰写本文时，唯一设计为多行的HTML表单元素是<textarea>。

使用文本区域

<textarea name="textarea" style="width:250px;height:150px;"></textarea>

在开始和结束标记之间不要留任何空格。否则，这会留一些空行或空格。

检查一下：

• http://www.w3.org/TR/html401/interact/forms.html#h-17.7

TEXTAREA元素创建多行文本输入控件

您应该使用它textarea来支持多行输入。

<textarea rows="4" cols="50">
Here you can write some text to display in the textarea as the default text
</textarea>

如果您需要具有自动高度的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>

输入不支持多行。您需要使用文本区域来实现该功能。

<textarea name="Text1"></textarea>

记住标记中<textarea>有值，而不是属性中：

<textarea>INITIAL VALUE GOES HERE</textarea>

它不能自我关闭，因为： <textarea/>

有关更多信息，请参阅此。

如果您使用的是React，库material-ui.com可以帮助您：

  <FormControl>
    <InputLabel htmlFor="textContract">{`textContract`}</InputLabel>
    <Input
      id="textContract"
      multiline
      rows="30"
      type="text"
      value={props.textContract}
      onChange={() => {}}
    />
  </FormControl>

https://material-ui.com/components/text-fields/#multiline

使用<div contenteditable="true">（很好地支持）存储到<input type="hidden">。

HTML：

<div id="multilineinput" contenteditable="true"></div>
<input type="hidden" id="detailsfield" name="detailsfield">

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
    }
});