使输入元素(type =“text”)处理多行文本 [英] Make input element (type="text") handle multiple lines of text
问题描述
我创建了一个带有输入的表单,但该框只处理单行中的文本。我想对它的样式,使输入字段类似于Twitter的,其中框本身是多行:
这是目前我拥有的:
; form name =userForm>
< input type =textid =userInputname =userInputplaceholder =在此输入文字。
< button type =submitid =button>提交< / button>
< / form>
我已经对按钮和输入进行了样式化,但是没有做任何改变它的形状,所以它是在默认。
您需要使用HTML < textarea>
使用 HTML5规格:
4.10.5.1.2文本(
type = text
)state and Search state
(type = search
)
输入
元素代表一行 纯文本编辑
元素值的控制
<
UPDATE
在你的评论中,你提到你想要textarea类似于Twitter的/无滚动条)。考虑此选项和以下SO帖子:
一个小的独立脚本可自动调整文本高度。
- 可以隐藏HTML textarea元素上的滚动条?
- 从textarea中删除滚动条
- 可以只使用CSS展开textarea
- 使用自动调整大小创建textarea
- 有没有办法让textarea伸展以适应其内容而不使用php或javascript?
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:
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?
You need to use an HTML <textarea>
element.
From MDN:
The HTML
<textarea>
element represents a multi-line plain-text editing control.
Using <input>
for multiline text is not possible natively and, if hacked, would be invalid HTML.
HTML5 spec:
4.10.5.1.2 Text (
type=text
) state and Search state (type=search
)The
input
element represents a one line plain text edit control for the element's value.(emphasis mine)
UPDATE
In your comments 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.
- 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?
这篇关于使输入元素(type =“text”)处理多行文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!