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

Posted 2023-02-24

【中文标题】<input type="text" /> 中的多行输入

【英文标题】：Multiple lines of input in <input type="text" />

【发布时间】：2011-09-09 21:16:55

【问题描述】：

我在一个表单中输入了这个文本：

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

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

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

【参考方案1】：

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

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

【讨论】：

并且textarea标签不能自闭。 <textarea \> 无效。

@alexH 与 textarea 无关，这是错误的斜线。原始答案具有自动关闭功能，但至少它是正确的斜线。

@Adam 我知道，但我不能再编辑我了。而且我不想删除它，因为我认为自动关闭部分很重要。

是的，但是textarea 不支持pattern 属性。真该死。

我不喜欢的是，在 JQuery 中，您不能使用 val() 设置 textarea 值。你必须append 到它。 :(

【参考方案2】：

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

【讨论】：

谢谢！我注意到 Chrome 允许输入多行，我完全不想这样做，原因是从 body 元素继承的分词

在 Chrome 39 和 Safari 8.0.2 中看起来不错，但在我的简短测试中不是 Firefox 34。 :(jsfiddle.net/msybs9g7

此解决方案已过时，不再受大多数浏览器支持。使用 代替

【参考方案3】：

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

【参考方案4】：

使用文本区域

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

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

【讨论】：

谢谢，我想知道高度是否可以代替行。

【参考方案5】：

如果您需要Multiline 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>

【讨论】：

谢谢。我修改了这个并在我的反应文本区域中使用它

P.S 你想添加溢出：隐藏到文本区域，否则它会在实际需要的之前添加额外的几个字母。

【参考方案6】：

检查一下：

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

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

【参考方案7】：

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

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

【参考方案8】：

使用<div contenteditable="true"> (supported well) 存储到<input type="hidden">。

HTML：

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

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

【参考方案9】：

如果你使用 React，你可以使用 3rd-party UI 库MUI。它有一个自定义的专有 <Input> 元素和一个 multiline 选项。

正如伦敦证交所评论的那样，最终它会呈现为<textarea>。

  <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

【讨论】：

来自文档：The multiline prop transforms the text field into a <textarea> element.。因此，即使它看起来像一个 ，它也在渲染一个 .

【参考方案10】：

如果你不需要编辑它，你可以使用一个

<span>text here</span>

它会随着文字展开。

【讨论】：

这将完全删除输入元素；一点帮助都没有。