使输入元素（type=“text”）处理多行文本

Question

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

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

这就是我目前拥有的：

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

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

Answer 1

使用

超文本标记语言：

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

Answer 2

使用文本区域。根据需要更改行和列属性。

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

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

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

Answer 3

您需要使用超文本标记语言

来自MDN：

超文本标记语言

使用

HTML5规范：

4.10.5.1.2文本（type=Text）状态和搜索状态（type=Search）

输入元素表示元素值的单行纯文本编辑控件。

（强调我的）

Twitter输入框

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

自动调整大小

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

• 是否可以隐藏超文本标记语言文本区域元素上的滚动条？
• 从文本区删除滚动条
• 只有CSS可以扩展文本区域？
• 使用自动调整大小创建文本区域
• 有没有一种方法可以让一个文本区域扩展到适合它的内容，而不使用php或javascript？