使输入元素(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>

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

Answer 1

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

来自MDN:

<textarea>

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

<input>在本地使用多行文本是不可能的,如果被黑客攻击,则HTML将是无效的.

HTML5规范:

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

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

(强调我的)

Twitter输入框

你提到你希望textarea类似于Twitter(自动调整大小/没有滚动条).考虑此选项和以下SO帖子:

自动尺寸

一个小的独立脚本,可自动调整textarea高度.

• 是否可以隐藏HTML textarea元素上的滚动条？
• 从textarea中删除滚动条
• 只用CSS扩展textarea是可能的吗？
• 使用自动调整大小创建textarea
• 有没有办法让textarea伸展以适应其内容,而无需使用php或javascript？

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