Html 使输入元素 (type="text") 处理多行文本

Make input element (type="text") handle multiple lines of text

提问by AlanH

I've created a form with an input, but the box only handles text in a single row. I would like to style it so that the input field is similar to that of Twitter's, where the box itself is multiple rows:

我创建了一个带有输入的表单，但该框仅处理一行中的文本。我想对其进行样式设置，以便输入字段类似于 Twitter 的输入字段，其中框本身是多行：

And it also expands when you hit enter:

当您按下 Enter 键时，它也会展开：

This is currently what I have:

这是目前我所拥有的：

<form name="userForm">
  <input type="text" id="userInput" name="userInput" placeholder="Enter text here.">
  <button type="submit" id="button">Submit</button>
</form>

I've styled the button and the input, but haven't done anything to change its shape, so it's at default. What do I have to tweak to achieve this?

我已经为按钮和输入设置了样式，但没有做任何改变它的形状的事情，所以它是默认的。我必须调整什么才能实现这一目标？

回答by Michael Benjamin

You need to use an HTML <textarea>element.

您需要使用 HTML<textarea>元素。

From MDN:

来自 MDN：

<textarea>

The HTML <textarea>element represents a multi-line plain-text editing control.

<textarea>

HTML<textarea>元素表示多行纯文本编辑控件。

Using <input>for multiline text is not possible natively and, if hacked, would be invalid HTML.

使用<input>的多行文字是不可能的本身，如果砍死，将是无效的HTML。

HTML5 spec:

HTML5 规范：

4.10.5.1.2 Text (type=text) state and Search state (type=search)

The inputelement represents a one lineplain text edit control for the element's value.

(emphasis mine)

4.10.5.1.2 文本 ( type=text) 状态和搜索状态 ( type=search)

该input元素代表一行的元素值的纯文本编辑控件。

（强调我的）

---

---

Twitter input box

推特输入框

You mention you want the textarea to resemble Twitter's (auto-resize / no scrollbar). Consider this option and the following SO posts:

您提到您希望 textarea 类似于 Twitter 的（自动调整大小/无滚动条）。考虑这个选项和以下 SO 帖子：

Autosize

A small, stand-alone script to automatically adjust textarea height.

自动尺寸

一个小的、独立的脚本，用于自动调整 textarea 高度。

• Is it possible to hide the scroll bar on an HTML textarea element?
• Remove scrollbars from textarea
• It is possible to expand a textarea only with CSS?
• Creating a textarea with auto-resize
• is there a way to get a textarea to stretch to fit its content without using php or javascript?

• 是否可以隐藏 HTML textarea 元素上的滚动条？
• 从textarea中删除滚动条
• 是否可以仅使用 CSS 扩展文本区域？
• 创建具有自动调整大小的文本区域
• 有没有办法在不使用 php 或 javascript 的情况下让 textarea 拉伸以适应其内容？

回答by Abdul Basit

Use TextArea.Alter rows and columns attribute according to requirement.

根据需要使用 TextArea.Alter 行和列属性。

<textarea class="input" rows="10" cols="10">Some text here</textarea>

To add the hover effect and change the box size , use css. Assign a normal height and width, and change that on focus.

要添加悬停效果并更改框大小，请使用 css。分配正常的高度和宽度，并在焦点上更改。

.input:focus {
    height:300px;
}
.input{
    width:500px;
    height:200px;
}

回答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]
});

if anyone wanted to use this for wrapping a single line and using enter to submit or move on in the form, here is what to add:

如果有人想用它来换行并使用回车提交或在表单中继续，这里是要添加的内容：

$("#multilineinput").on('keypress',function(e) {    
    if(e.which == 13) { //on enter
        e.preventDefault(); //disallow newlines     
        // here comes your code to submit
    }
});