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

html

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

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

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

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

lambda

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

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

@alexH 无论文本区域如何，这是错误的斜线。原始答案具有自动关闭功能，但至少它是正确的斜线。

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

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

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

Sté

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

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

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

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

</div>
                        			                   	</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="d-flex mb-4">
								<div><span class="avatar avatar-md avatar-success">
									<span class="avatar-initials rounded-circle">Á</span>
								</span></div>
								<div class=" ms-3 w-100">
									<small>Álvaro González</small>
									<div class="d-flex w-100">
										
										<div class="card mt-2 rounded bg-light w-100">
											<div class="card-body p-3">
                			                   			<p class="mb-0 text-dark ">
                			                   				你不能。在撰写本文时，唯一设计为多行的 HTML 表单元素是 <a href="https://developer.mozilla.org/en/HTML/Element/textarea" rel="noreferrer"><code><textarea></code></a>。
                			                   			</p>
												<hr class="my-4">
												<div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="d-flex mb-4">
								<div><span class="avatar avatar-md avatar-success">
									<span class="avatar-initials rounded-circle">t</span>
								</span></div>
								<div class=" ms-3 w-100">
									<small>themightysapien</small>
									<div class="d-flex w-100">
										
										<div class="card mt-2 rounded bg-light w-100">
											<div class="card-body p-3">
                			                   			<p class="mb-0 text-dark ">
                			                   				使用文本区域
                			                   			</p>
                			                    		<pre class="mb-0 bg-dark text-white p-2 text-break" style="white-space: pre-wrap; "><code><textarea name="textarea" style="width:250px;height:150px;"></textarea>
</code></pre>
                			                   			<p class="mb-0 text-dark ">
                			                   				不要在开始标签和结束标签之间留下任何空格 否则这将留下一些空行或空格。
                			                   			</p>
												<hr class="my-4">
												<div>
                        					            <div class="comment">
                        				                   		<div class="p-3 mb-2 bg-light border rounded">
                        				                   			谢谢，我想知道高度是否可以代替行。
                        				                   		</div>
                        			                   	</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="d-flex mb-4">
								<div><span class="avatar avatar-md avatar-success">
									<span class="avatar-initials rounded-circle">P</span>
								</span></div>
								<div class=" ms-3 w-100">
									<small>Prasad Gayan</small>
									<div class="d-flex w-100">
										
										<div class="card mt-2 rounded bg-light w-100">
											<div class="card-body p-3">
                			                   			<p class="mb-0 text-dark ">
                			                   				如果您需要具有自动高度增加功能的多行文本区域，您可以使用以下简单的 javascript，
                			                   			</p>
                			                   			<p class="mb-0 text-dark ">
                			                   				
                			                   			</p>
                			                   			<p class="mb-0 text-dark ">
                			                   				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)">

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

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

Matías Fidemraizer

检查这个：

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

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

Osanda Deshan

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

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

MarsAndBack

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

MarsAndBack

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

正如 LSE 评论的那样，最终它会呈现为 <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.。所以即使它看起来像一个<input>，它也呈现一个<textarea>。

ThePrince

如果您不需要编辑它，您可以使用

在此输入文字

它将随着文本展开。

这将完全删除输入元素；根本没有帮助。