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

Question

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

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

这是目前我所拥有的：

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

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

原文由 TheRealFakeNews 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

来自 MDN：

<textarea>

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

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

HTML5 规范：

4.10.5.1.2 文本（ type=text ）状态和搜索状态（ type=search ）

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

（强调我的）

---

推特输入框

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

自动尺寸

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

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

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

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

原文由 Abdul Basit 发布，翻译遵循 CC BY-SA 3.0 许可协议