使输入元素（type="text"）处理多行文本答案

【问题标题】：Make input element (type="text") handle multiple lines of text使输入元素（type="text"）处理多行文本
【发布时间】：2016-06-03 05:00:26
【问题描述】：

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

当你按下回车键时它也会展开：

这是我目前拥有的：

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

我已经设置了按钮和输入的样式，但没有做任何改变它的形状，所以它是默认的。为了实现这一点，我需要做些什么调整？

【问题讨论】：

标签： html css forms twitter input

【解决方案1】：

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

来自 MDN：

<textarea>

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

将<input> 用于多行文本本身是不可能的，如果被黑客入侵，将是无效的 HTML。

HTML5 规范：

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

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

（强调我的）

推特输入框

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

Autosize

一个用于自动调整文本区域高度的小型独立脚本。

【讨论】：

【解决方案2】：

使用TextArea。根据需要更改行和列属性。

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

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

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

【讨论】：

【解决方案3】：

使用<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]
});

如果有人想用它来换行并使用 enter 提交或继续表单，请添加以下内容：

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

【讨论】：