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

问题描述

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

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:

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

And it also expands when you hit enter:

这是我目前拥有的:

<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?

推荐答案

您需要使用 HTML 元素.

You need to use an HTML <textarea> element.

来自 MDN:

HTML 元素表示多行纯文本编辑控件.

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

将 用于多行文本在本机是不可能的，如果被黑，将是无效的 HTML.

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

HTML5 规范:

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

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

The input element represents a one line plain text edit control for the element's value.

(强调我的)

推特输入框

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

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

自动调整大小

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

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

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

这篇关于使输入元素(type=“text")处理多行文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！