Question

我以下列表格输入此文字：

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

我试图让它采取多行输入。宽度和高度使盒子更大，但是用户可以输入他想要的所有文本，但它只填充一行。

如何使输入更像textarea？

Answer 1

您需要使用textarea来获取多行处理。

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

Answer 2

可以通过为其提供word-break: break-word;属性来创建文本输入多行。（仅在Chrome中测试过）

Answer 3

你做不到。设计为多行的唯一HTML表单元素是<textarea>。

Answer 4

使用textarea

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

不要在开始和结束标签之间留下任何空格或者否则这将留下一些空行或空格。

Answer 5

检查一下：

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

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

Answer 6

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

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

Answer 7

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

Answer 8

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

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

请记住，<textarea>的标记内是值，而不是在属性中

<textarea>INITIAL VALUE GOES HERE</textarea>

它不能通过以下方式自行关闭：<textarea/>

有关更多信息，请查看this。

Answer 9

如果您使用的是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

Answer 10

使用<div contenteditable="true">（supported well）存储到<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
    }
});

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

10 个答案: